Проектирование структуры web-сайта — Блог на A5.ru
Еще несколько лет назад требования к сайтам были достаточно низкими. Их оформление не изобиловало анимацией, изображениями, различными динамическими элементами, а структура ресурсов была достаточно однотипной. Но с развитием технологий “вес” и объем сайтов значительно возросли. Сейчас практически каждая вторая компания имеет собственный ресурс в сети. При этом его структура является достаточно разветвленной и на нем может насчитываться несколько десятков или даже сотен страниц.
Разработка Интернет-ресурса — длительный и трудоемкий процесс, который нельзя производить без тщательной подготовки. Прежде чем создавать сайт, следует продумать каждую его страницу и элемент. Это необходимо чтобы обеспечить максимальное удобство для посетителей. Поскольку пользователи будут попадать на различные страницы из поисковых систем, следует предоставить им возможность перехода между ними и свободного доступа ко всей информации.
Как разрабатывать структуру web-сайта
Пользователь строит свою модель взаимодействия с Интернет-ресурсом на основании уже имеющегося у него опыта. Именно это зачастую является решающим фактором при проектирование структуры сайта. В будущем популярность ресурса будет зависеть от того, насколько ожидания пользователя совпадут с контентом, ссылками и элементами, размещенными на странице. Логически продуманная и предсказуемая структура позволит максимально упростить поиск необходимой информации и сделает более комфортной его эксплуатацию.
Структура web-сайта — это перечень разделов, страниц, подразделов и других функциональных блоков, которые могут использоваться в качестве отдельных элементов, а также их взаимосвязей. На стадии проектирования у вас нет необходимости заботиться о внешнем виде страниц, поскольку картинки, текст и все остальные элементы дизайна будут добавлены в будущем.
В первую очередь необходимо отметить, что не стоит полностью копировать структуру чужих сайтов, так как Вы рискуете повторить их ошибки. Лучше начать с самого начала и разработать свой, уникальный проект.
Некоторые особенности проектирования структуры web-сайта
- Необходимо соблюдать однообразие элементов. При разработке структуры следует определить иерархию объектов. К примеру, каждый раздел включает в себя определенные подразделы и т.д.
- Следует избегать создания схожих страниц. Если однотипная информация может быть помещена на одной странице, не следует разрабатывать для нее отдельную. Например, контактную информацию можно разместить в разделе про компанию, а также в футере (нижнем блоке) каждой страницы. Нет особой необходимости выделять ее в отдельный раздел.
- Не создавайте разделов, дублирующих друг друга. Если функционал какого-либо блока частично повторяется во втором, избавьтесь от него. Не нужно лишний раз путать посетителей сайта.
- Предусмотрите простой и быстрый доступ ко всем наиболее важным разделам со всех страниц сайта.
- Проектирование структуры сайта должно включать составление карты основных страниц. Обязательно продумайте какие разделы наиболее необходимы для пользователя и исключите те, которые будут совершенно бесполезными. К примеру, если Ваша компания собирается выкладывать новости не чаще нескольких раз в год, не следует добавлять данный пункт в меню и создавать подобную страницу.
- Придумайте свой идеальный вариант структуры, полностью соответствующий тематики Вашего ресурса. Произведите анализ Ваши конкурентов и определите, какие из страниц на их сайтах являются наименее необходимыми.
Для того, чтобы разработка структуры веб-сайта была максимально комфортной, ее можно отобразить с помощью компьютерных программ, таких как MS Visio, Power Point или обычный Paint. Таким образом Вы сможете в графическом виде составить набор необходимых страниц, а также продумать их связи друг с другом. Также можно воспользоваться обычной ручкой и бумагой, чтобы нарисовать структуру ресурса. Стоит отметить, что для подобных целей существует специализированное ПО, но его использование не целесообразно при создании небольших сайтов.
Какие виды структуры web-сайта существуют?
Структура сайта разделяется на внутреннюю и внешнюю. При этом внутренняя структура зачастую значительно влияет на внешнюю.
- Внутренняя структура сайта. К ней относятся логические связи между различными страницами ресурса. В данной части необходимо продумать, как пользователь сможет максимально быстро получить доступ к нужной информации. К примеру, позаботится чтобы человеку потребовалось не более 3 кликов для перехода ко всем важным разделам или интересным страницам. Также иногда внутренней структурой называют особенности размещения директорий и ресурсов на сервере.
- Внешняя структура сайта. Она полностью повторяет навигацию ресурса и используется для того, чтобы упростить “путешествие” посетителей по страницам. Благодаря ей человек может получить доступ к основному функционалу сайта с любой страницы. При этом внешняя структура анализируется поисковыми системами и может повлиять на позицию Вашего сайта в выдачи.
Типовые структуры сайтов
Различают четыре основные типовые структуры сайтов. В чистом виде каждая из них используется достаточно редко. Чтобы сделать сайт максимально удобным для пользователя и не навредить его функционалу следует грамотно комбинировать различные виды структур web-сайтов.
Линейная структура сайта
Данный вид сайта является наиболее простым. Подобная структура последовательна, в ней каждая из страниц ведет на предыдущую и следующую страницы ресурса. В данном случае навигация очень проста и осуществляется с помощью 2-3 ссылок, использование такого сайта чем-то похоже на перелистывание страниц книги.
Решетчатая структура сайта
Разработка структуры веб-сайта подобного типа также не отличается особой сложностью, но она более удобна для использования, чем линейный вариант. В данном случае каждая страница ресурса связана с двумя или тремя страницами одновременно. Обычно каждая из них имеет связи с одной или двумя страницами разделов одного уровня, а также с одной страницей — подразделом. Здесь уже должна прослеживаться иерархическая структура информации на ресурсе.
Иерархическая структура сайта
Основным элементом иерархической структуры является главная страница сайта. Ссылки с нее ведут на разделы второго уровня, а на страницах второго уровня размещены ссылки на материалы/разделы третьего уровня и т.д. В данном случае пользователь, перейдя на главную страницу сайта, должен обязательно посетить страницу определенного раздела, чтобы добраться до подраздела. Зачастую подобная структура web-сайта применяется для каталогов товаров.
Паутинообразная структура сайта
Она предполагает связь страниц “все со всеми” то есть пользователь может попасть с любой страницы ресурса на любую другую страницу, минуя все разделы. Разработка структуры веб-сайта подобного типа достаточно сложна, особенно если на ресурсе расположено много страниц. На практике пользователь просто “потеряется” в огромном количестве ссылок. Стоит отметить, что данная структура web-сайта повторяет в малом масштабе структуру всемирной сети Интернет.
Создание гибридной структуры сайта для повышения удобства его использования
Выше описанные структуры web-сайтов практически не пригодны для использования в чистом виде. Они являются конструктором, из которого каждый может взять необходимые ему блоки для реализации своего проекта. К примеру, для каталога товаров интернет-магазина лучше всего использовать иерархическую структуру. При этом на самой странице товара можно расположить ссылки на сопутствующие товары, чтобы пользователь долго их не искал, а это уже элемент паутинообразной структуры.
Главное требование к разработке структуры — это логичность и простота. Пользователь должен с легкостью находить нужные ему материалы. Необходимо отметить, что любой web-сайт не может постоянно поддерживать одну и ту же структуру. Не смотря на то, что разделы и каталоги будут оставаться неизменными, при размещении новых материалов и статей будет возникать внутренняя перелинковка, которая внесет свои корректировки.
Проектирование структуры сайта под определенные цели
Сайты отличаются друг от друга по размеру и предназначению. Интернет-магазины имеют сотни или тысячи страниц, блоги могут обойтись несколькими десятками страниц, а сайтам-визиткам достаточно одной-двух. Поэтому нельзя придумать универсальный шаблон структуры, который подойдет каждому web-сайту.
Разработка структуры для сложных многостраничных сайтов
Если Вы желаете создать крупный новостной ресурс или каталог какой-либо продукции, следует помнить, что Вам необходимо уделить максимум внимания на этапе разработки структуры. Это требуется чтобы избежать ошибок, влияющих на удобство эксплуатации, и, как следствие, снижающих конверсию.
- Для начала запишите все существенные блоки, которые будет содержать Ваш сайт и решите, какие из них обязательно должны попасть на главную страницу.
- Теперь определитесь к каким блокам или материалам пользователь должен иметь доступ с любой страницы ресурса (к примеру, на каждой странице должна быть ссылка, идущая в корень ресурса).
- Составьте четкую иерархию для разделов и подразделов сайта. К примеру, перейдя в раздел “Бытовая техника” пользователь должен увидеть список страниц ее производителей или типов техники (электрочайники, холодильники и т.д.), которые представлены на сайте.
- Если у Вас будут размещаться статьи, решите, как пользователю будет удобней переходить от одного материала к другому. В блоге Вы можете воспользоваться примером линейной структуры сайта.
После того, как структура web-сайта описана, можете нарисовать связи между страницами. Это поможет Вам упростить восприятие строения ресурса.
Структура бизнес-сайтов и сайтов-визиток
Данные типы ресурсов обычно имеют очень простую структуру, соответствующую иерархическому типу. Они состоят из нескольких страниц, а в некоторых случаях включают в себя блоги. В подобных проектах нет необходимости создавать множество отдельных блоков и делать массу разветвлений. Структура web-сайта состоит из главной страницы, а также страниц второго и третьего уровня, которые распределены по категориям.
Разрабатывая любой сайт, поставьте себя на место пользователя и подумайте, что является для Вас неприемлемым при посещение сторонних ресурсов, а также учтите, какие идеи привлекли Ваше внимание. Это позволит сделать Ваш сайт более удобным и увеличить конверсию.
После того, как Вы завершите проектирование структуры Интернет-ресурса, можно будет перейти к процессу создания страниц, разработки их дизайна и наполнения контентом.
www.a5.ru
Проектирование и разработка Web-сайтов.
Тема 2
Основы веб-проектирования
Любой ресурс, опубликованный во Всемирной сети, от глобального информационного портала с десятками тысяч посетителей в день до скромной домашней странички, куда заходят всего два человека в месяц, включая ее автора, это, прежде всего, сложный комплекс инженерно-дизайнерских решений.
Для web-сайта очень важным является стиль сайта, придающий ему собственное лицо и узнаваемость.
С чего начинается проектирование web-сайта?
Дизайн — важная составляющая хорошего сайта. От дизайна зависит, насколько привлекательны и посещаемы будут ваши странички.
Проектирование Web-сайта начинается с определения целей и задач будущего сайта.
Под термином «web-дизайн» принято понимать совокупность работ по разработке логической структуры и художественного оформления веб-страниц.
Задачей web-дизайна является обеспечение удобной подачи информации пользователю сайта или web-приложения, удовлетворение эстетического вкуса аудитории.
Современный web-дизайн начинается с разделения оформления и содержания. Благодаря такому подходу вносить изменения в содержание сайта, не затрагивая его дизайн, или же изменять дизайн, не изменяя содержание, стало намного легче.
Основы web-дизайна закладываются на этапе разработки технического задания – документа, описывающего требования относительно визуального представления и структуры сайта. В техническом задании также зачастую описываются пожелания касательно программной реализации сайта.
После разработки и утверждения техзадания начинается этап разработки дизайна. И первое, что необходимо сделать – это создать модульную сетку. Модульная сетка описывает расположение элементов на страницах сайта.
Модульная сетка любой web-страницы содержит, как минимум, два блока: для основного текста сайта и для меню. Если на странице нужны дополнительные элементы, например, еще одно меню, «подвал» («footer») или «хедер» («header»), то модульная сетка разбивается еще на несколько блоков.
Размеры блоков модульной сетки подбираются индивидуально и могут быть какими угодно. Однако следует учитывать, что согласно требованиям юзабилити, появление горизонтальной полосы прокрутки при просмотре страницы недопустимо – это негативно сказывается на восприятии сайта посетителями. Поэтому в совокупности ширина блоков не должна превышать максимальной ширины экранов представителей целевой аудитории сайта.
В блоке «хедер» (заголовок) принято указывать название сайта, которое может быть выбрано в соответствии с названием компании или именем автора, а также при необходимости логотип сайта. Основной блок меню в европейских сайтах традиционно расположен слева, в соответствии с направлением письменности (слева-направо). Также основное меню может быть расположено сверху, под «хедером».
Если сайт рассчитан для просмотра на экранах с разным разрешением, то web-дизайн, как правило, выполняется «резиновым» или же центрируется по горизонтали.
Веб-дизайн — это не знание языка разметки документов HTML и не умение работать с графическими редакторами. Да, все это тоже необходимо, однако далеко не достаточно для того, чтобы создать сайт.
Веб-дизайн — это проектирование практичной, удобной, визуально привлекательной системы. Англоязычные разработчики используют термин «usability» — целая наука, которая рассказывает, как разрабатывается дизайн, ориентированный на пользователя — понятный и удобный.
Таким образом, можно сказать, что веб-дизайн — это проектирование веб-интерфейса, и знание инструментов для разработки (языков разметки и программирования, графических редакторов и редакторов верстки, различных клиентских и серверных приложений и утилит) и профессиональное владение ими, безусловно, поможет разработчику, однако не гарантирует признания его как выдающегося веб-дизайнера.
Возьмите карандаш и лист формата A4. Разверните лист горизонтально — в таком виде он больше соответствует пропорциям экрана. Представьте, что все объекты, которые планируется разместить на странице (как правило дизайнеры начинают моделировать главную страницу сайта, остальные страницы — адаптированы к дизайну первой) — это модули. В простейшем случае вы их можете рисовать схематическими прямоугольниками.
Итак — какие модули должны присутствовать на главной странице сайта? Рассмотрим самый типичный вариант для сайта средней фирмы или вариант авторской страницы.
Название (сайта или организации)
Логотип (или любой графический знак, который уникальным образом идентифицирует проект или организацию)
Навигационное меню (в простейшем случае это один блок, однако, их может быть несколько в рамках одного проекта и одной страницы проекта).
Данные. Собственно содержание первой страницы.
Второстепенные данные. Это может быть графический баннер партнерского проекта или текстовая информация о спонсорах…
Вы получили ряд прямоугольников, которые требуется разместить на странице (экране).
Конечно же, перед тем, как приступить к разработке, даже опытные дизайнеры обязательно уделяют время «серфингу» по интернету, наблюдают варианты уже реализованных решений, а новичку опыт «хождения и наблюдения» просто необходим…
Важно научиться быстро моделировать целостную систему из ваших информационных блоков. Проектировать модульную сетку.
Веб-дизайн многое наследовал из полиграфического опыта — и принципы композиции, и базовые понятия публикации текстов и работы со шрифтами, и — как вы сами видите — модульные сетки. Чем более информационный проект — тем более сложную модульную сетку ему необходимо использовать.
И, с другой стороны — презентационные сайты-открытки, сайты-визитки, вполне довольствуются одноколоночной модульной сеткой.
Для домашней страницы (в большинстве случаев) разработчики выбирают двухколоночную модульную сетку. При этом пропорции ширины колонок так же зависят от содержания и целей проекта.
Когда информационная модель будущего сайта готова, можно приниматься за художественную часть web-дизайна. Обычно web-дизайн выполняется в виде шаблонов – определенных наборов элементов и их взаимосвязей. Именно шаблоны позволяют отделить разработку визуального дизайна сайта от содержания.
Различают шаблон главной и шаблоны типовых страниц сайта. Шаблон главной страницы оформляется, как правило, более «затейливо», а шаблоны остальных страниц сайта лишь поддерживают основную идею.
Разработанный в графическом редакторе шаблон верстается в html-файл. При помощи тэгов языка HTML и таблиц стилей CSS задаются все необходимые параметры страницы: размещение элементов, цвет и размеры шрифтов, цвет фона и т.д.
Работа над шаблоном требует обязательного теста на кросс-браузерность, т.е. на совместимость с различными браузерами и их версиями. Разные браузеры могут по-разному интерпретировать код html, поэтому такое тестирование необходимо, чтобы избежать возможного «развала» дизайна.
Итак, сайт — это система связанных между собой гипертекстовых документов, оформленных веб-дизайнером с учетом целей и задач проекта и соблюдением всех требований usability.
Каждый документ имеет определенную структуру — заголовки и завершение документа, благодаря которым может быть отображен в браузере, содержит информацию в теле документа и оформление в рамках утвержденного дизайна. Переход от одного документа к другому осуществляется посредством гиперссылок.
Разработка дизайна сайта начинается:
с анализа целей и задач проекта (одно дело — привлечь посетителя с целью продать как можно больше продукции, другое — вызвать у него максимальное количество эмоций необычной графикой или гениальными стихами).
с оценки целевой аудитории — потенциальных посетителей (клиентов) этого проекта.
Каждый разработчик должен потратить время на то, чтобы нарисовать «портрет своего посетителя» — кто он? Подросток, который ищет информацию о любимой рок-группе? Домохозяйка, которая пытается заказать в он-лайне понравившуюся соковыжималку? Пенсионер, для которого так важно отследить последние политические новости или программист, которому нужна документация о работе программы, студент, художник, менеджер?
Задача дизайнера именно в подборе цвета и размещения элементов в порядке, приятном и удобном для конечного потребителя. И от того, кем будет он, потребитель, какой возрастной группы, насколько он является «подготовленным» для пользования навигационными меню и получения информации — зависит как структура сайта, так и его оформление.
Для того, чтобы эту модель сайта сформировать, следует тщательно проанализировать информацию, которую вы на сайте будете представлять — т.е. ее тип и объем, частота обновления, ее модульная сетка, структурированность данных.
studfile.net
Серьезное проектирование серьезных сайтов. Часть 1. Аналитика / SECL Group corporate blog / Habr
Сразу скажу, что статья получилась очень большая. В моем духе. Поэтому я решил разбить её на две части: аналитика и визуализация. А после еще будет несколько статей с логическим продолжением. Первая может показаться сухой из-за большого количества текста, но без неё не сможет существовать вторая. Поэтому, если вы действительно интересуетесь проектированием сайтов, читать нужно обе и внимательно, я постарался избавиться от «воды» и рассказать только о полезном.
И еще статья описывает технологию проектирования, однако она не учитывает специфики подходов waterfall и agile. С waterfall данную технологию проектирования можно применять без изменений, а вот для agile придется оптимизировать.
Вступление
Начиная писать эту статью, я сразу вспомнил аналогию с проектированием дома, а если точнее, целого небоскреба с торговыми центрами, офисами и жилыми помещениями. В такой масштабной стройке никто не начнет строительные работы, пока все до мелочей не будет учтено в проекте этого небоскреба. Причем требований огромное множество: помещения должны быть правильно расположены, материалы должны быть долговечные, небоскреб должен быть устойчив к землетрясениям и т.д. Все отлично понимают важность проектирования зданий, потому что от этого зависит не только удобство его использования, но и жизни людей. Я не строитель, я итишник, а если точнее – я концептуальщик, занимаюсь концепциями и проектированием больших сайтов уже много лет. Из опыта могу со стопроцентной уверенностью сказать, что успех любого большого сайта зависит именно от проектирования: все точно также, как в строительстве, только на кону не жизни людей, а успешность сайта. Именно поэтому в этой статье я хочу рассказать, как и почему нужно проектировать большие сайты.
Прежде всего, давайте разберемся, кто именно должен заниматься проектированием сайтов. Существует особая специальность для этого вида работ, а соответствующий человек называется проектировщик. Я сознательно не употребляю модных понятий типа UI (UX), потому что в статье речь будет идти не только об интерфейсах. Данный специалист должен обладать хорошей логикой, аналитическим складом ума, иметь очень богатый пользовательский опыт, мыслить предпринимательскими (экономическими) масштабами, быть внимательным к деталям. Кроме этого, он должен хорошо разбираться в интерфейсах и юзабилити, технологиях веб-разработки, маркетинге и многих других сферах. В процессе работы проектировщик, конечно, может советоваться с разными экспертами: дизайнерами, верстальщиками, программистами и т.д., дабы спроектировать продукт наивысшего качества. Получился довольно широкий образ идеального проектировщика, однако «из песни слов не выкинуть».
Процесс проектирования
В методологии ниже я буду описывать теорию, и сразу практический пример результатов работы по конкретному этапу для одного из наших проектов.
Понимая общие принципы, которых, конечно, значительно больше, чем может поместиться в данной статье, можно вплотную рассмотреть сам процесс. Проектирование можно разделить на ряд последовательных, связанных между собой этапов:
1. Сбор требований (брифинг).
Как можно было догадаться, все этапы проектирования связаны друг с другом, и каждый последующий строится на предыдущем. А так как этап сбора требований у нас первый, логично, что именно от него зависит, в каком направлении мы будем двигаться. Обычно всю основную информацию можно собрать за несколько дней, а в процессе работы уточнять детали, главное тут задавать правильные вопросы.
Первое. Узнайте, какие цели ставит инициатор проекта, что в итоге он хочет получить. Кроме этого нужно точно выяснить критерии оценки достижения этой цели, они не всегда очевидны, даже если и кажутся таковыми. Это важно, именно из этого понимания будут делаться акценты в проектировании.
Второе. Попросите инициатора проекта рассказать все, что у него в голове. Не торопитесь, терпеливо слушайте и не перебивайте, свои идеи и критику можно всегда высказать в конце. Если человек увлеченный идеей он может взахлеб рассказывать часами, это нормально. После рассказа, нужно попросить его подвести итог и изложить идею в одном предложении: если это удалось сделать, значит, идея видна довольно четко, если нет – значит, идея проекта еще не сформирована до конца. Вообще, если инициатор проекта увлечен – это находка для проектировщика, как правило, такие люди сильно помогают в процессе проектирования.
Третье. Спросите про целевую аудиторию (ЦА): кто именно будет пользоваться сайтом, и какую полезность он получит. Ответ «все пользователи интернета» — недопустим, это будет означать, что инициатор проекта не понимает, для кого именно он создает этот проект, а значит и непонятно, как его делать. Это, как играть в дартс с закрытыми глазами: где цель известна, а прицелиться нет возможности. На этом этапе в идеале выяснить стандартные параметры ЦА: пол, возраст, регион и т.д. Обязательно нужно выделить ядро ЦА. Кроме этого нужно понимать какими устройствами и ПО пользуется ЦА. Этап глубокой работы с ЦА будет в одном из последующих этапов, а пока нужно понимать, как это видит инициатор проекта.
Четвертое. Узнайте, кто являются прямыми и косвенными конкурентами. Ответ «конкурентов нет», скорее всего, говорит о том, что человек не изучил конкурентную среду. Почти всегда есть конкуренты. Даже если идея проекта уникальная, ЦА уже пользуется какими-то сайтами, а значит, как минимум, есть косвенные конкуренты.
Пятое. Спросите про дедлайны, бюджетные ограничения, познакомьтесь с лицами, принимающими решения, и вообще выясните все организационные вопросы. Это тоже важно, чтобы учесть все интересы и спокойно работать.
Многие вопросы пересекаются с этапами ниже, собранная информация на первом этапе станет основой для дальнейшей работы. Крайне важно правильно понять задачу инициатора проекта и начать движение в правильном направлении, цена ошибки на этом этапе слишком высока.
На выходе у нас получается текстовый документ (бриф) с большим количеством информации от клиента. Этот документ нужно дать на утверждение заказчику, чтобы он подтвердил, что все понято правильно и ничего не упущено.
2. Цели проекта и клиента.
У каждого заказчика, будь он внешний или внутренний, есть свои цели. Одни могут хотеть заработать на сайте, другие думают об увеличении доли рынка оффлайн бизнеса с помощью сайта, а для третьих это вообще может быть хобби. Кроме этого цели могут стоять перед самим проектом и при этом отличаться от целей клиента, они могут быть средством достижения глобальной цели клиента (так называемое дерево целей, когда у клиента есть одна глобальная цель, а у проекта много локальных целей, которые нужны для достижения глобальной).
От целей зависит вектор проектирования, например, у клиента может быть цель – создать успешный прибыльный бизнес, это значит, что проектировщик должен будет уделить особое внимание проектированию методов монетизации проекта и по возможности избегать затратного функционала, такого, как видеораздел на сайте.
Кроме целей нужно узнать у заказчика четкие критерии успешности, чтобы иметь возможность представить результат так, как его представляет заказчик.
На выходе у нас получается тестовый документ с двумя списками: цели клиента и цели проекта. Этот документ должен утвердить заказчик.
Пример:
Проект: социальная сеть владельцев домашних животных.
Цели заказчика: получение прибыли
Цели проекта:
- Помощь в выборе питомца
- Помощь в решении проблем с питомцами
- Создание тематического сообщества
- Создании базы тематического контента
- Создание платформы для продаж и покупок тематических товаров
3. ЦА и персонажи.
По сути это этап глубокого изучения целевой аудитории. Мы должны понять, кто именно наша целевая аудитория, кто из представителей ЦА является ядром, какие стоят задачи перед каждой целевой группой.
Для начала стоит составить общий портрет ЦА, разбив его на четыре группы, у каждой из которой будут разные критерии, которые в свою очередь могут влиять на функционал и интерфейс.
Социально-демографические характеристики: пол, возраст, образование, уровень дохода, род занятий. Информация, которая нам нужна для закладывания правильной основы. Например, сайт для подростков 15-18 лет будет отличаться от сайта для пожилых людей в возрасте 60+ лет.
Психографические характеристики: стиль жизни, особенности личности, черты характера, жизненная позиция, система ценностей. Более ценная информация для проектирования, чем первая группа критериев. Например, если мы знаем, что наша ЦА больше всего ценит время, мы можем спроектировать простой интерфейс и дать возможность получать не весь контент, а самое ценное для конкретной целевой группы, или даже дать инструменты персонализации под каждого человека.
Поведенческие характеристики: повод для регистрации, искомые выгоды, частота посещаемости конкурентов, степень готовности к переходу на другой сайт, отношение к проекту (если он не новый), приверженность к существующим сайтам и т.д. Тут критериев может быть много, нужно исходить из самого проекта. Эта группа показателей одна из самых важных для проектирования. В тоже время, собрать эти данные будет очень сложно. Эта информация может быть у заказчика, если мы проектируем новую версию уже существующего проекта, у конкурента, который конечно её не даст, или её нужно будет собирать по крупицам через опросы ЦА.
Географические характеристики: страна, город, район. Учитывая то, что мы все же в Интернете, для нас это маловажный критерий, однако иногда стоят задачи по проектированию национальных сайтов или сайтов с геолокацией, тогда важность этого критерия резко вырастает. Кроме этого, если есть географическая привязка, это может повлиять на контент, о котором тоже нужно думать при проектировании.
После подробного портрета ЦА мы можем приступать к персонажам. Это очень полезный прием для дальнейшей генерации идей. Имея понимание, кто наша ЦА в общем, мы её должны разбить на группы типовых пользователей будущего проекта. Исходя из тематики проекта, группы можно объединять по роду деятельности, владению каким-то предметом, потребностям и т.д. Например, для тематической социальной сети ИТ специалистов группы могут быть следующими: системный администратор, программист, директор ИТ компании и т.д. Задача проектировщика создать список основных целевых групп сайта, начиная от самой большой группы пользователей (ядро) и по убыванию. Нужно не забыть, что кроме обычных пользователей могут быть еще собственные сотрудники, партнеры, рекламодатели и многие другие неочевидные пользователи.
Для каждой группы мы придумываем типичного персонажа, некого вымышленного человека, который до мозга костей является типичным представителем именно этой целевой группы. В идеале найти несколько живых людей и пообщаться с ними об их образе жизни. У каждого такого персонажа должно быть: имя-фамилия (использовать известных людей или знакомых – запрещено, чтобы не искажать восприятие), фотография (можно найти красивую аватарку в поиске VK), возраст, город проживания, род занятий, семейное положение, краткое описание его деятельности, привычек, задач, проблем, пользовательского опыта. Описание этого человека должно быть в разрезе его типичной целевой группы, т.е. если он, например, системный администратор, и мы проектируем ИТ портал, то в описании персонажа должна быть информация, какие ИТ порталы он сейчас посещает, что он на них делает, какие у него есть желания и т.д. Пишем без фанатизма, 1000 знаков на одного персонажа хватит с головой. Проектировщику нужно вжиться в роль каждого персонажа, поставить себя на его место. Эта информация поможет нам лучше понять свою целевую аудиторию и в следующем этапе сгенерировать много полезных идей.
Для полного понимания ЦА, иногда проводят интервью с пользователями, это уже сфера маркетинговых исследований.
При анализе ЦА можно мысленно переносить предполагаемое восприятие и поведение на наш проект, тут опять начинают появляться идеи, и их мы тоже выписываем в отдельный список.
На выходе у нас получается два документа: общий портрет ЦА и описание персонажей для каждой целевой группы. Эти документы должен утвердить заказчик.
Пример:
Проект: социальная сеть владельцев домашних животных.
Рис. 1. Персонаж
4. Исследование конкурентов.
Для того чтобы сделать качественный проект и заинтересовать целевую аудиторию мы должны все знать о конкурентах и понимать, как можно их обойти, где их слабые стороны, а где их позиции будет сложно подвинуть. Если коротко – быть на много порядков лучше всех конкурентов. Для этого мы должны найти и проанализировать прямых и косвенных конкурентов.
Для поиска есть разные методы: опрос участников рынка (мини-исследование), разнообразные рейтинги, статьи по рынку, просто гугление. Очень важно искать проекты не только в рунете, но и в англоязычной части интернета, скорее всего в западной части уже есть аналогичные или близкие проекты, у которых можно позаимствовать интересные идеи.
Всех конкурентов нужно разделить на прямые и косвенные. Прямые – это те, которые работают на том же рынке и предлагают аналогичный продукт (контент, функционал), а косвенные – те, которые имеют сходные продукты и могут удовлетворять часть потребностей, на которые нацелен проектируемый проект. Если мы понимаем, что уже есть прямые конкуренты, это означает, что новый проект будет не первым на рынке, и ему уже будет нелегко. Тут нужно хорошо продумать стратегию позиционирования и идентификации на конкурентном рынке, т.е. затрагивается сфера маркетинга в проектировании, и далее мы должны расставить правильные акценты, которые «зацепят» целевую аудиторию.
Есть разные методы оценки, мне импонирует старый добрый SWOT-анализ, он позволяет увидеть сильные и слабые стороны конкурентов, а что еще важнее – возможности для своего проекта.
При анализе конкурентов можно использовать принцип «разумного заимствования», то есть не изобретать велосипед для самых тривиальных задач, а просто их позаимствовать. Обычно это делается для стандартного функционала. Кроме того есть замечательный принцип юзабилити: пользователь хорошо разбирается в том, к чему уже привык, и если он знает, что, например, для загрузки файлов обычно используется строка для ввода URL и кнопка «загрузить», то именно это он и будет ожидать на всех сайтах.
В процессе изучения конкурентов могут возникать идеи для проектируемого проекта, их нужно выписывать в отдельный список для этапа карты ума. Кроме того на первых 2х этапах могли рождаться первые идеи, но обычно их не очень много, т.к. стадия проектирования очень ранняя, их тоже мы записываем в этот список.
Маленькое лирическое отступление. Думаю среди читателей найдутся сторонники стратегии голубого океана, которая нам говорит не конкурировать, а искать свободную нишу. Свободная ниша – это всегда большой плюс, но конкурентов все равно нужно проанализировать, ведь мы строим высокоинтеллектуальный и сложный продукт, у которого есть тысячи граней, поэтому опыт конкурентов будет явно не лишним: у них много готовых идей и вещей, которые можно реализовать значительно лучше.
На выходе мы получаем файл с полным анализом конкурентов, обычно вполне хватает 5 популярных тематических проектов в рунете и 5 западных. По каждому конкуренту должен быть SWOT-анализ с 4мя разделами. И, конечно, должен появиться первый список идей для проектируемого проекта. Документ с анализом конкурентов должен утвердить заказчик.
Пример:
Проект: социальная сеть владельцев домашних животных.
Конкурентов в рунете почти нет, по крайней мере серьезных. В западном сегменте есть несколько интересных и популярных сайтов подобной тематике. Основными конкурентами будут:
http://www.dogster.com/ — международный, популярный, высокое качество.
http://www.dogster.ru/ — российский, средняя популярность, среднее качество.
http://www.catster.com/ — международный, популярный, высокое качество.
Полный анализ конкурентов по принципу SWOT расписывать не буду, тут и так все понятно, я думаю.
5. Задачи-проблемы-решения (для пользователей).
На основе персонажей с позапрошлого этапа мы можем перейти к задачам-проблемам-решениям. У каждого человека всегда есть какие-то задачи, краткосрочные и долгосрочные. Этих задач может быть несколько, например, у человека может быть глобальная цель – повышение своей квалификации и локальная – найти работу. Если цель у него до сих пор не реализована, значит есть какие-то преграды (проблемы), и значит мы ему можем предложить некие решения, которые ему помогут в реализации этих целей.
Прежде всего для каждого из персонажей мы продумываем ряд задач, важных конкретно для него. Все задачи должны соответствовать тематике проектируемого ресурса, сильно общие задачи нам пользы не принесут, в рамках одного ресурса мы не можем удовлетворить абсолютно все потребности всех людей, нам нужно помнить об тематических ограничениях и не пихать все подряд. Многие совершают ошибку, думая, что если человек, например, слушает музыку онлаин на каком-то сайте, то и в любом проектируемом нами сайте ему тоже будет нужна такая возможность. Это заблуждение. Мы не можем создать идеальный портал, который вместит все возможности Интернета, да и чем больше мы будем «размывать» главную идею кучей стороннего функционала, тем хуже для его дальнейшего продвижения.
Имея ряд тематических задач, под каждую из них мы должны выявить преграды (проблемы). Например, у задачи «найти подрядчика» может быть несколько проблем: «Как отличить качественного подрядчика от некачественного?», «Как найти подрядчика, самого близкого по географическому признаку?», «Как сделать рассылку запроса сразу всем потенциальным подрядчикам одновременно?» и т.д. Делая все это, идеи сами будут приходить в голову, для большинства проблем есть очевидные решения, но об этом ниже.
Когда у нас готовы задачи-проблемы, мы можем генерировать решения, те самые идеи, которые будут основой будущего проекта, и, что самое приятное, они создаются для решения задач нашей ЦА, а значит, несут большую ценность для проекта.
На выходе должен получиться файл со сводной таблицей с тремя графами задачи-проблемы-решения, собранный со всех персонажей. В таблице можно сделать привязку к персонажам, чтобы потом была возможность вернуться и доработать этот документ. Естественно, этот документ нужно утвердить с заказчиком, и, кроме того, на этом этапе заказчик может подсказать неочевидные решения.
Пример:
Проект: социальная сеть владельцев домашних животных.
Рис. 2. Задачи-проблемы-решения
6. Сценарии поведения.
Этот этап призван выявить ошибки в логике, расставить приоритеты и улучшить придуманные нами решения. Для применения метода нам опять необходимо вжиться в образ персонажа, взять его цель и продумать его потенциальный сценарий поведения (последовательность действий). Это нужно проделать с каждой из целей всех персонажей. Сценарии необходимо записать в специальный документ.
Делая сценарии, мы можем выявить недостатки идей. Например, проектируя карточку товара в интернет-магазине, проектировщик мог забыть сделать функцию выбора разных модификаций одного итого же продукта: вроде магазин без этого работать сможет, но с существенным недостатком. Проектировщик делает сценарий с целью купить модель «Х»: заходим на главную, выбираем раздел каталога, выбираем нужный товар, выбираем модификацию «Х»… и вот тут он понимает, что возможности выбрать модификацию в проекте нет и её нужно доработать.
Кроме недостатков мы можем найти ошибки в логике. Например, проектируя магазин, проектировщик мог сделать стандартное оформление заказов: ввод личных данных, оплата, доставка (порядок выбран неслучайно). Далее делаем сценарий: найти товар и нажать «купить» (первую часть сценария я сократил), на странице оформления заказа заполняем личные данные, делаем оплату через электронные деньги, указываем способ доставки… а вот и логическая ошибка! Доставка может быть платной и повлиять на стоимость заказа, а это значит, что шаг про доставку должен быть до оплаты.
К этому этапу мы еще вернемся, когда будут готовы прототипы интерфейса, чтобы окончательно проверить правильность идей.
На выходе мы имеем специальный документ с множеством сценариев поведения, а также улучшенные старые и новые идеи.
Пример:
Проект: социальная сеть владельцев домашних животных.
Цель: выбрать пса
Сценарий: заходит на главную страницу, находит раздел Зоопедия, переходит на главную страницу раздела с рубрикатором по животным и породам, а также специальным разделом с общей информацией, переходит в раздел с общей информацией, где на видном месте есть ссылка на статью о выборе животного, переходит в статью и читает её, в конце статьи видит блок «Читайте также», в котором видит еще несколько статей с более углубленной информацией, делает предварительный выбор из 3х пород собак, переходит на главную Зоопедии и открывает страницы с подробной информацией о выбранных породах, на каждой из страниц он видит ссылки на продавцов этой породы, окончательно определяется с выбором и переходит в магазин.
При написании этого сценария были придуманы идеи: рубрикатор в Зоопедии, блок «Читайте также», ссылки на продавцов со страницы определенной породы.
Во второй части я расскажу про mind map, структуру сайта, прототипирование, юзабилити тестирование и техническое задание. У каждого из разделом будут визуальные практические примеры.
В комментариях можно задавать вопросы.
P.S. Под социальную сеть владельцев домашних животных, которую я показывал в примере, мы ищем инвестора или покупателя. Обращайтесь по любым контактам на сайте.
P.P.S. Чтобы получать наши новые статьи раньше других или просто не пропустить новые публикации — подписывайтесь на нас в Facebook, VK, Twitter
P.P.P.S. Совсем скоро в нашей бизнес-школе Digitov стартует курс: Проектирование серьезных сайтов. Подписывайтесь на курс сейчас и сможете купить его со скидкой.
Оригинал статьи тут: http://seclgroup.ru/article-serjoznoe-proektirovanie-serjoznix-saitov.html
Автор:
Никита Семенов (Facebook, VK, LinkedIn)
CEO
Компания «SECL GROUP» / «Internet Sales Technologies»
habr.com
интерфейс, структура, спецификация и расположение инфоблоков, реализация требований к сайту
Проектирование интернет сайта — это создание продуманной модели эффективного веб-ресурса на этапе подготовки к созданию дизайна. Создание структуры сайта, а именно – структуры разделов и интерфейса, позволяет оптимизировать процесс разработки. Видя созданный юзабилити-специалистом эскиз, вы сможете оценить его соответствие вашим задачам и при необходимости внести изменения в предварительную модель. Таким образом, разработка дизайна и программной части будет происходить на основе утвержденного заказчиком прототипа, что позволит избежать неожиданностей и выполнить работу максимально оперативно и эффективно, с минимумом «переделок» в процессе.
Проектирование web сайта — это процесс создания прототипа, модели будущего веб-ресурса.Это важный этап разработки сайта, от которого зависит степень соответствия разрабатываемого проекта требованиям, которые к нему предъявляются.
Почему важно создавать прототип?
Внесение изменений на этапе проектирования позволяет максимально быстро и эффективно выполнить работу на следующих, более трудоемких этапах.Создание дизайна и программной части сайта производится на основе прототипа, который утвержден заказчиком. Вы точно будете знать, чего ожидать от сайта, и получите именно то, что планировали.
Это оптимальный способ организации разработки сайта.
Техническое задание
Прототип создается на основе технического задания, в котором отражены требования заказчика к сайту. Сбор требований — ответственная задача, от которой зависит целесообразность и эффективность будущего проекта. Проектирование интерфейса и структуры сайта всегда должно начинаться с постановки задач и разбора тематики.
Требования вашего бизнеса
Требования к сайту как инструменту бизнеса, призванному приносить прибыль. От них зависит, будет сайт сделан «для галочки», или же для извлечения настоящей выгоды для вашего бизнеса.Требования внешних пользователей
Требования к сайту как инструменту маркетинговых коммуникаций, призванному создавать имидж, информировать целевую аудиторию, побуждать к заказу и оформлять его.Требования участников проекта
Требования к сайту как к помощнику сотрудникам компании-заказчика, призванному помогать менеджерам в работе с клиентами, расчете стоимости заказов, просмотра контента.Требования конкуренто- br> способности
Требования к сайту как участнику конкурентной борьбы с сайтами компаний-соперников, призванному предложить аудитории убедительные, выгодные, удобные условия.Как определиться с требованиями?
В рекламной практике применяется SWOT-анализ, который позволяет всесторонне оценить ситуацию во внутренней и внешней среде компании.На основе этого общепринятого формата мы разработали собственные методы оценки ситуации, соответствующие разработке веб-сайтов и рекламе в интернете.
Внутренняя среда
Сильные стороны
Те преимущества вашей компании, которые будут отражены на сайте в качестве достоинств вашего бизнеса и убедят потенциальных клиентов выбрать именно вашу компанию.Слабые стороны
Те особенности вашей компании, которые вы не хотели бы акцентрировать, но которые необходимо компенсировать другими, более привлекательными особенностями.Внешняя среда
Возможности
В случае с разработкой веб-сайта под возможностями подразумеваются слабые стороны конкурирующих веб-ресурсов —те пункты, по которым вы сможете легко их обойти.
Угрозы
Это сильные и уникальные особенности сайта ваших конкурентов. Необходимо учесть эти угрозы вашей конкурентоспособности и разработать не менее сильные решения.В компании Web Sigma вы можете заказать анализ конкурирующих веб-ресурсов, чтобы оценить ситуацию во внешней среде, а также найти решения для своих внутренних задач. Рекомендации аналитиков помогут вам составить эффективное техническое задание.
Результат проектирования
В результате работ по проектированию сайта заказчик получает макет со схемой расположения всех необходимых модулей сайта. На этом этапе продумывается функционал и общий вид сайта, который позже будет оформлен дизайнером.Важно понимать, что проектирование структуры и интерфейса будущего сайта – это не просто набросок будущего дизайна. Это планирование системы, которая должна успешно функционировать и быть удобной как для пользователей, так и для поисковых машин.
После утверждения прототипа заказчиком мы приступаем к созданию дизайна и программированию сайта. Работы проводятся в соответствии с техническим заданием.
web-sigma.ru
Проектирование web-сайтов
1. Этапы создания Web-сайта
Создание Web-сайта предполагает наличие нескольких этапов — от придумывании идеи до ее воплощения. Чтобы создать действительно интересный и полезный продукт, необходимо пройти следующие этапы.
Анализ и проектирование. Анализ сильных и слабых сторон конкурентов, информационное проектирование Web-сайта, разработка его концепции, оценка целевой аудитории.
Написание контента. Под контентом (Content) понимается ни формационное наполнение сайта. Термин применяется для обозначения идейного содержимого Web-сайта.
Креатив. Креатив (Creative) — термин для обозначения визуальной составляющейWeb-сайта. Сюда входит разработка дизайна, графических элементов, обработка графики и все, что с ней связано.
Написание кода Web-сайта. Программирование Web-файла, написание функциональной части.
Тестирование. На этом этапе проверяется все: удобство навигации, целостность данных, корректность ссылок и орфография, к тому же не все браузеры одинаково интерпретируют одни и те же теги HTML.
Публикация. РазмещениеWeb-сайта в Интернете. Большинство Интернет-провайдеров(Internet serviceprovider—JSP) предоставляютуслугу по размещению домашних Wcb-страниц бесплатно (эта услуга называется Web-хостингом — Web hosting), например http://www.chat.ru/ (до 20 Мб), http://www.narod.ru/ (до 100 Мб), http://www.boom.ru/ (до 50 Мб). Для публикации можно размешать Web-сайт у провайдера иливоспользоваться другими возможностями,
Раскрутка. Рекламная компания по узнаванию Web-сайта и повышения его посещаемости. Сюда входит регистрация Web-сайта в поисковых системах, обмен ссылками, баннерная реклама и др.
Поддержка. Необходимо решить, каким образом будут добавляться новые разделы и материалы, что будет происходить со старыми. Возможно, потребуется создание архива новостей, куда будут попадать новости, потерявшие свою актуальность. Еще более важным является регулярное обновление информации на Web-сайте для его постоянной привлекательности.
2. Терминология Web-проектирования
Web-браузер — программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертекстового документа на экране компьютера. Наиболее часто используемые браузеры — Microsoft Internet Explorer и NetScape Navigator. Наряду с термином «браузер» используют термины-синонимы: «обозреватель» и « навигатор».
Web-сайт —набор связанных между собой, близких по смыслу Web-страниц и файлов. На каждом Web-сайте существует одна Web-страница называемая домашней (homepage) или главной страницей. Все посетители Web-сайта сначала попадают на нее, а потом с помощью гиперссылок попадают на другие страницы Web-сайта,
Web – страница (документ HTML) представляет собой текстовый файл на языке HTML формата «.htm или *.htrnl, размешенный в WWW. Web-страница кроме текста может содержать графику, анимации, видеоклипы, музыку, а также гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их.
Один из способов создания Web-страниц (или документов HTML) состоит в использовании текстового редактора Блокнот (NotePad), встроенного в Windows. В этом редакторе создается файл Web-страницы, который сохраняется с расширением *.htm с последующим просмотром результатов с помощью браузера. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо выполнить команду Файл — Открыть в программе Internet Explorer и указать путь к созданной Web-странице с помощью кнопки Обзор.
studfile.net
Концепция web-проекта или почему мы убиваем свои идеи? / Habr
Ежедневно десятки людей загораются идеей создать нечто своё, реализовать свой web-проект. В большинстве случаев все эти начинания ни к чему не приводят. Как не удивительно, основной причиной провала проекта служит отсутствие или недоработаность концепции.В этой статье рассмотрены анализ успешности «зелёных» web-проектов, причины их провалов и методика написания концепции проекта. Статья рекомендуема для прочтения всем людям, решившим создать свой web-проект впервые.
Для начала немного статистики…
Важный момент: В статье речь идёт о первых или «зелёных» проектах, которые делают люди не имеющие должного опыта в их реализации.
Сразу скажу, откуда Я взял эти цифры – это моя личная статистика за 1,5 года. Я сам ранее занимался разработкой и реализацией крупных web-проектов для одной российской корпорации, поэтому испытываю профессиональный интерес ко всем новым идеям, которые можно встретить на просторах сети.
В анализе участвовало на момент написания данной статьи 54 проекта. Среди идей проектов встречаются и банальные социальные сети и браузерные MMORPG, ничем не отличающиеся от других, и действительно стоящие и инновационные экземпляры. Но давайте перейдём к цифрам, они сами скажут за себя.
Замечание: доли округлены, статистика представлена в виде среза по 54 проектам, мой собственный проект в статистике не участвует.
Какое состояние проекта на текущий момент?
Активно развивающихся проектов, с более-менее сложенной командой, ровно один (2%). Данный проект существует около года.
Проектов, которые, то работают, то простаивают по тем или иным причинам – 3 (6%). Один из них в таком «вялом» режиме находится уже почти полтора года. Несмотря на низкую скорость развития этих проектов, сказать, что они провалены и не развиваются, нельзя.
Остальные полсотни проектов (92%) «умерли» (проект не реализовался или у него нулевая посещаемость) по разным причинам.
По какой причине был закрыт проект?
4 проекта (7%) действуют. Я привел их в этой диаграмме для получения среза по всем проектам.
У 12 проектов (22%) нет своей идеи. Эти проекты копируют существующие web-проекты с некоторыми изменениями. Среди них социальные сети, много браузерных игр и несколько онлайн-сервисов.
15 проектов (28%) не сумели создать команду или автор проекта не сумел найти людей готовых воплотить задумку в жизнь. Максимальное развитие данных проектов заканчивалось на организации сайта проекта, обычно очень корявого.
5 проектов (9%) были закрыты по причине отсутствия денег на развитие. По крайне мере, так уверяют авторы.
Остальные 18 web-проектов (34%) «канули в лету» по неизвестной мне причине. Авторы этих проектов на попытки связаться с ними никак не реагируют.
В принципе всё предсказуемо, но перейдём к следующему вопросу.
Имеется ли у проекта адекватно оформленная концепция?
Адекватно оформленная концепция есть только у 1 проекта (2%). И угадайте, в каком состоянии находится этот проект? Он активно развивается.
У остальных концепция либо крутится в уме автора, либо выражена в 5-10 предложениях.
Думаю тут и без комментариев всё понятно. Корень зла найден… Теперь предстоит обрубить его и рассказать, что же такое концепция проекта.
Что такое концепция?
Концепция (от лат. conceptio — понимание, система) — определённый способ понимания (трактовки, восприятия) какого-либо предмета, явления или процесса; основная точка зрения на предмет; руководящая идея для их систематического освещения. (Wikipedia)
Говоря по-простому, концепция – это система опорных точек построения готового продукта, документально описанная и позволяющая достичь результата без дополнительных данных. Это идея проекта и инструкция, как воплотить эту идею в жизнь, записанная на бумаге или другом носителе информации.
Что бы избежать лишней писанины, Я подготовил шаблон концепции web-проекта. Естественно, Вы можете изменить его под свои нужды. Я, лично, оформляю концепцию по старинке, то есть на бумаге. Например, текущий мой проект выглядит так:
Конечно, концепция проекта — это понятие абстрактное, строящиеся на уровне структуры и идей. Концепция, по своей природе, не должна содержать ничего лишнего, но она тесно переплетена с технической реализацией. Для работы с такой идеальной концепцией нужно хорошее знание технической базы. У людей, которые впервые решили создать свой web-проект, таких знаний обычно нет, поэтому в моём варианте концепции Вы встретите многие критические технические моменты, на которые следует обратить внимание.
Содержание концепции web-проекта с описанием отдельных пунктов
Название проекта
Тут всё понятно. Как корабль назовёшь, так он и поплывёт.
Цель проекта
Вспоминаем дипломную работу в институте и пишем нечто подобное. Это необходимо для четкого понимания того, для чего этот проект затевался. Напомню, цель отображает желаемый результат. Например: создание и реализация браузерной MMORPG «Кирпичи», получения дохода от рекламы и продажа проекта.
Задачи проекта
Аналогично предыдущему, вспоминаем диплом. Это нужно для понимания того, как этот проект осуществить. Напомню, задачи отображают действия, которые необходимо проделать для достижения результата. Например: исследовать рынок браузерных MMORPG, разработать программный код, протестировать сервис.
Участники проекта
В этом пункте ФИО всех, кто участвует в создании проекта. Совет на будущее: используйте свои реальные ФИО, так как иначе потом трудно доказать, что, например, «Зафорд Библброкс», который писал программный код это Вы.
Сроки проекта
Здесь все начинающие (и даже опытные) разработчики делают ошибку. Выделяйте на разработку в два раза больше времени, чем Вам кажется.
Логотип и девиз
Тут тоже всё понятно.
Описание проекта
Напишите несколько абзацев текста, описывающих ваш проект, подчеркивающих его достоинства. Пишите понятно и главное увлекательно. Потом пригодится для привлечения инвесторов или покупателей.
Отличительные особенности проекта
Все особенности вашего проекта. Если Вам нечего сюда писать, кроме как — «этот проект лучший, так как мой», то можете на этом заканчивать свою деятельность web-разработчика.
Целевая аудитория
Опишите людей, для которых пишется проект. Например: продавцы леса города Биробиджан.
Техническая часть
- Сервер и расширения. Например, Apache 2.2+
- Серверный язык и расширения. Например, PHP 5+
- СУБД. Например, MySQL 5+
- Ожидаемая посещаемость. Надо четко понимать, сколько народа сможет обслуживать ваш сервис без тормозов. Например, 3000 человек в день.
- Трафик. Тут всё просто. Количество людей в день умножаем на средний вес страницы и получаем объём трафика в день.
Общая часть
- Кодировка. Опишите основные кодировки, используемые в вашем проекте. Совет: используйте кодировку utf-8.
- Сжатие. Будут ли файлы сжиматься при отправке клиенту.
- Минимизация. Будут ли файлы минимизироваться (вырезаться лишние пробелы и комментарии) при перенесения на рабочий сервер.
- Фильтр входящих данных. Очень важно определить в начале какие данные мы будем принимать от клиента. Например, только буквы русского и латинского алфавита, цифры, знаки =_&
- Ограничение доступа. Опишите директории проекта, к которым доступ пользователям запрещен. Например, доступ к директории scripts запрещён для всех пользователей, кроме root.
- Правила названий. Даже если Вы пишете проект один, то вначале определите, как будете называть модули, файлы, функции и переменные. Например, для функций использовать нижнее подчеркивание, для переменных выделение заглавными буквами.
- Правила комментирования. Например, заголовок функции в /* */, разделение функций при помощи /—/
- Способы взаимодействия разработчиков. Например, icq.
Логика приложения
В этом пункте желательно нарисовать схему того, как будет происходить обмен данными между частями сервиса. Конечно, пункт можно опустить, если взаимодействие элементарное, по принципу клиент-сервер.
Серверная часть
В этом пункте описываются все критические настройки серверной части. Я выделяю следующие:
- magic_quotes
- register_globals
- allow_files
Клиентская часть:
- Фреймворки и плагины. Например, JQuery
- Doctype. Например, strict
- Поддерживаемые браузеры. Например, IE7+, Opera 9+, FF 3.5+
- Поддерживаемые ОС. Например, только Windows
- Поддержка телефонов
- CSS. Например, всё до css3
- Разрешение экрана клиента. Например, выше чем 1024*768. Прошу обратить внимание на этот пункт. О нём обычно вспоминают в конце работы, когда видят свой «разъехавшийся» сайт.
- Тип изображений. Например, Jpeg и Gif. Благодаря IE, этот пункт нужно тоже учитывать.
Следующие пункты можете не заполнять, если не понимаете, что это значит.
- Ajax
- Делегирование событий
- CSS Sprites
- CSS3PIE
СУБД
Относительно СУБД, Я выделяю только одну критическую настройку:
- Доступность InnoDB
И в этом пункте следует нарисовать схему базы данных с описанием всех полей и связей. Этот момент очень сложный, так как требует хорошего представления о проекте.
Концепт-арт проекта
Здесь приводятся эскизы всех страниц проекта, а не только первой. У меня это выглядит примерно так:
Остальное
Конечно, концепция web-проекта не ограничивается только приведёнными мной пунктами. Сюда нужно добавить детальное описание каждого момента и функциональности проекта.
В заключение
Может получиться, что документации будет не один листок бумаги (у моего текущего проекта 38 листов А4) и писать Вы её будете очень долго (Я писал 2 месяца), но оно этого стоит. Концепция – это ваша опора на пути к реализации вашего проекта. Помните: отсутствие концепции – это «убийство» вашей идеи.
И напоследок, общие советы и дополнительные статьи по тематике управления проектами:
Общие советы по написанию концепции:
- Используйте уникальную идею.
- Не копируйте и не пользуйтесь ресурсами конкурентов. Иначе получите клон чужого проекта.
- Используйте свои настоящие ФИО. Почему – описано выше.
- Пишите по-русски, правильно, с соблюдением семантики языка. Особенно, пункты с описанием проекта. Помните: незнание русского языка очень отрицательно сказывается на бизнесе.
- Общайтесь с людьми, представляющими интерес для Вас и вашего проекта. Собирайте их контакты, наводите про них справки. Возможно, Вам придётся воспользоваться их услугами.
- Читайте необходимую литературу, расширяйте свой кругозор. Совет: читайте «с маркером», то есть выделяйте важные части.
- Составьте дневник проделанной работы. Он позволит четко осознать скорость выполнения работы.
- Составьте журнал сделанных ошибок. Сэкономит время от повторного наступания на одни и те же грабли.
- Составьте журнал найденных «багов». Записывайте туда всё, что Вам не нравиться в проекте, а потом исправляйте.
- Составьте журнал идей. Записывайте туда все, даже безумные, идеи относительно проекта.
- Тестируйте проект на целевой аудитории.
Дополнительные статьи по тематике «Управление проектами»
Если моё видение концепции web-проекта показалось Вам несколько сумбурным, то можете ознакомиться с несколькими статьями по близкой тематике. Статьи посоветованны хабраюзерами TheFaSTeR, seorez, Napolsky — большое им спасибо.
Update 09.01.11 1:53 Для избежания лишних споров, добавил абзац текста с ответом почему мой шаблон концепции в такой форме.
Update 09.01.11 9:10 В конце статьи добавил абзац текста с ссылками на статьи по управлению проектами. Спасибо хаброюзерам за комменты.
habr.com
Проектирование сайта
Проектирование сайта предназначено для разработки понятной и четкой внутренней организации содержимого сайта, определения его целей и целевой аудитории.
Информационное проектирование – это разработка понятной и четкой внутренней организации содержимого WEB-сайта для того, чтобы его посетители могли легко найти нужную им информацию. Речь идет не о создании привлекательной графики и выразительных лозунгов, а об улучшении ясности и функциональностиWEB-сайта.
Правильно выполненное проектирование дает посетителю возможность оценить, какая информация находится на WEB-сайте и насколько быстро можно до нее добраться. На любой странице посетители должны представлять свое местоположение, что они могут сделать на этой странице, и куда могут пойти дальше.
Для разработки и создания сайта существует несколько моделей, которые позволяют поэтапно, шаг за шагом, реализовать свой проект от идеи до ее воплощения. Какую модель предпочесть зависит, в общем, только от разработчиков и тех целей, которые они преследуют. Для коммерческого проекта, например, нужно рассчитать все затраты на разработку и выполнить проект качественно и в срок. В этом случае, требуется подход, позволяющий максимально быстро, при этом на достаточно высоком уровне, сделать сайт и сдать его заказчику.
Для большинства разработчиков вполне подойдут простые модели проектирования сайтов, но которые четко определяют цели сайта и описывают его внутреннюю структуру.
Модели проектирования
Модель проектирования представляет собой метод разработки проекта, основанный на определенном представлении его разработчиков, как необходимо создавать свои работы. Ниже представлены некоторые распространенные модели, которые можно использовать для создания сайта и других проектов.
Модель водопада предполагает выполнение нескольких, следующих друг за другом этапов, приведенных на рисунке 3.1. Вначале идет написание технического задания, затем анализ и проектирование сайта; следующие этапы — написание контента, дизайн и программирование. Заканчивается все генеральным тестированием и приемкой проекта.
Достоинства: это одна из самых простых и доступных моделей. Все этапы идут последовательно, и каждый последующий не начинается, пока не закончится предыдущий.
Недостатки: эта модель предполагает точное знание того, чего хочется реализовать на сайте. Обычно же, обстоит как раз наоборот, очень трудно сразу сформулировать цели, которые следует выполнить. Учитывая достоинства и недостатки этой модели при написании сайта, я решил использовать именно её.
Рисунок 5.1 — Модель водопада
Рисунок 5.2 — Спиральная модель
Данная модель использует противоположный подход, нежели модель водопада. Работа начинается с этапа «Планирование и анализ» и по часовой стрелке переходит к этапам выполнения, тестирования полученных результатов и оценки. На следующей итерации все повторяется по новой, но уже с учетом выявленных недочетов проекта. Таким образом, пройдя несколько итераций и повторив все этапы несколько раз, проект избавляется от недостатков, обрастая дополнительными возможностями и преимуществами.
Достоинства: возможность разрабатывать проект за несколько итераций позволяет постепенно его улучшать, реализовывая различные идеи.
Недостатки: «Лучшее — враг хорошего». На каком-то этапе всегда следует остановиться, чтобы представить проект. Но в данной модели четкие критерии его выполнения отсутствуют. Это создает определенные сложности.
Рисунок 5.3 — Модель MicrosoftSolutionsFramework
Данная модель сделана компанией Microsoft для своих собственных целей, но приобрела популярность и среди других разработчиков. Все программные продукты Microsoft создаются именно по этой методологии. Модель MSF вобрала в себя лучшее из двух моделей, описанных выше — спиральной и водопада, Состоит из четырех этапов: анализ, планирование, разработка и стабилизация (рисунок 3.3). Каждый этап заканчивается достижением определенного результата, например, после анализа проекта идет одобрение продуманной концепции. В итоге пишется определенный документ, в котором записывается результат выполнения данного этапа, для того, чтобы каждый из разработчиков четко понимал свое место в проекте и задачи, которые ему предстоит решить. Модель итерационна и при прохождении всех этапов, проект можно доработать с учетом предыдущей итерации. Но, поскольку, окончание каждого этапа четко указано, нет, как в спиральной модели, бесконечного повторения одного и того же процесса.
Достоинства: MSF является одной из самых интересных моделей разработки и создания проектов взявшее лучшее из других моделей и отказавшись от присущих им недостатков.
Недостатки: практически их нет. Разве что можно отнести к ним большую, по сравнению с другими моделями, сложность. Поэтому для небольших сайтов рекомендуется использовать другие методы.
Представленные модели не являются исчерпывающими, поскольку существуют и другие, но они нашли широкое применение при разработке сайтов и других проектов.
При проектировании сайтов следует учесть определенные сложности и особенности, с которыми приходится сталкиваться его разработчикам.
Особенности проектирования сайтов
К особенностям проектирования сайтов можно отнести следующее:
В человеке — 80% воды, в Интернете — 99,9%. Сейчас в Интернете скопился огромный объем информации и пользователя подчас даже приходится уберегать от него, упорядочивая информацию, делая работу с ней более понятной и удобной.
Данный факт подтвержден многочисленными исследованиями. Вместо подробного чтения текста, мы бегло просматриваем его, задерживаясь на словах и выражениях, которые привлекли наше внимание.
Самая популярная кнопка в браузере — «Назад», возможно из-за того, что если появилась не та информация, что ожидали, всегда можно вернуться на предыдущую страницу. Однако, если загрузка происходит медленно, приходится делать выбор с осторожностью. Вдобавок, ну кому хочется тратить свое время на ожидание!
В отличие от операционной системы, которая является стандартизованной и содержащей единые элементы интерфейса, WEB-сайты имеют разное представление данных. Это создает определенные трудности для его посетителя.
Эта особенность является слегка преувеличенной, ведь читаем же мы каждый день электронную почту, новости и другую информацию, и никто еще не жаловался, что не будет это делать, потому что на мониторе буквы плохо видны. Однако читать с листа бумаги действительно легче и быстрее, нежели, чем с экрана монитора. Это было учтено при составлении текстов для сайта.
Концептуальное проектирование
Концептуальное проектирования сайта — это определение целевой аудитории, анализ, сбор и документирование требований пользователей и выработка способов их реализаций. При проектировании и разработке важно, чтобы сайт был ориентирован на конкретных пользователей и отвечал их требованиям.
Ниже приводятся пункты, которые необходимо описать при проектировании сайта. Некоторые являются обязательными, другие просто предназначены для того, чтоб было легче сформулировать остальные.
Анализ и постановка проблемы
Описание существующих на данный момент сайтов, их основные недостатки и достоинства. Формулировка основных проблем.
Какие проблемы будут решены в ходе данного этапа, сроки выполнения и ответственные.
Описание предполагаемых групп пользователей. Сюда входит уровень их обучения (новички, опытные или профессионалы), конфигурация системы (операционная система, тип браузера, используемые дополнительные модули, способ выхода в Интернет, полоса канала и др.). Если групп получается больше, чем одна, что характерно для большинства сайтов, они ранжируются по степени их важности.
Сценарии определяют, что, по мнению разработчиков, может заинтересовать группы пользователей, описанных в предыдущем пункте. Кроме интересов, в сценариях указывается, как пользователи будут взаимодействовать с содержимым сайта — какие разделы посетят, какие применяемые на сайте технологии станут использовать.
Рассмотрим использование данной методики на примере сайта города Инза.
Цели:
знакомство с историей города;
привлечение инвесторов для развития города;
повышение социального уровня города Инза.
Пользователи:
человек, родившийся в этом городе, либо проживающий в нём;
частный предприниматель;
абитуриент.
Сценарии пользователей:
Здесь описаны разделы сайта, интересные данной группе пользователей.
Человек, родившийся в этом городе, либо проживающий в нём: Информация об истории города, почтовый адрес администратора сайта.
Частный предприниматель: Информация о предприятиях города. Телефоны, адреса, реквизиты заводов и фабрик. Возможность задать интересующие вопросы.
Абитуриент: Информация об образовательных учреждениях. Телефоны, адреса, реквизиты техникумов, училищ, ВУЗов. Возможность задать интересующие вопросы.
Из описанного сценария в итоге формируется содержимое сайта, которое должно удовлетворять группы пользователей, на которые он рассчитан.
Таким образом, проектирование сайта является первым и важным этапом, определяющий последующую работу над ним — дизайн, обработку графики, написание кода HTML.
Кроме концептуального, существует еще логическое и физическое проектирование, представляющих мнение проектной группы и разработчиков. Но и этого уже достаточно, чтобы лучше понять назначение и задачи своего проекта, создавать полезные и интересные ресурсы.
Логическое проектирование
Логическое проектирование включает организацию информации на сайте, построение его структуры и навигации по разделам.
Принципы проектирования сайта
При проектировании информационного наполнения сайта и средств навигации следует придерживаться четырех базовых принципов, которые основаны на восприятии информации человеком:
1) использование обозначений.Применять следует слова и термины, которые являются устоявшимися и понятными большинству посетителей сайта. В этом смысле не очень удачным является применение пиктограмм. В зависимости от контекста такие изображения могут быть поняты посетителями сайта неправильно. По этой причине следует размещать содержательные элементы, ссылки и элементы навигации с их обозначениями, а также избегать невыразительных терминов на странице;
2) уместность.Разделы сайта должны содержать информацию и элементы, которые соответствуют данной части или фрагменту сайта. Элементы, которые не отвечают данному принципу, должны быть перенесены в другое место или удалены;
3) единообразие.Использование единой навигации по сайту и его оформления. Так, одинаковые элементы на страницах должны иметь один и тот же размер и находиться в одном и том же месте. Если страницы, по какой-либо причине имеют отличия, пользователь должен четко понимать, чем они обусловлены;
4) разделение на части.Человек не в состоянии хранить одновременно большой объем информации. Это связано с ограниченностью кратковременной памяти, которая хранит информацию, необходимую в данный момент времени. Как правило, люди способны воспринимать информацию, содержащую от четырех до шести различных элементов. Поэтому, посетители сайта лучше ориентируются и быстрее находят нужные им материалы, когда они разделены на группы, содержащие от четырех до шести элементов.
В своей работе я старался не отходить от базовых принципов проектирования.
Организация информации
Организация данных в виде упорядоченной структуры должна сообщать посетителю, какую информацию он может обнаружить на сайте и где ее искать. Структура сайта напоминает оглавление книги; если оно хорошо написано, становится понятно, что ожидать от книги, еще не прочтя ее. Информация должна быть организована таким образом, чтобы посетитель знал, что его ждет на следующей странице уже по названию ссылки, на которую он нажимает.
Структура организации информации на сайте может быть:
Линейная структура. Наиболее простой способ организации данных. Представляет собой набор следующих друг за другом WEB-страниц. К линейной структуре можно отнести пошаговое выполнение операций.
Иерархическая структура. Самый распространенный вариант размещения информации. Предусматривает применение главной страницы, на которой размещается меню со ссылками на разделы сайта, расположенные на следующих страницах. Разделы могут содержать в себе подразделы и другую детальную информацию.
Контекстно-зависимая структура. В подобной структуре ссылки на другие разделы сайта формируются в зависимости от определенных действий пользователя. К примерам такой структуры относятся элементы интернет-магазинов, поиск по ключевым словам.
Комбинированная структура. Представляет собой сочетание нескольких предыдущих структур. Например, на сайте может быть предусмотрена иерархическая структура, которая в некотором месте может содержать выполнение пошаговых действий (линейную структуру).
На сайте города Инза информация представлена в иерархическом виде.
Навигация по сайту
Навигация характеризует удобство перемещения между разделами сайта, возможность быстро переходить на нужную страницу. Хорошо продуманная навигация сайта должна отвечать на вопросы посетителя: где я нахожусь, какие страницы я уже посетил, какие разделы еще могу посетить. Описание основных вопросов навигации представлено ниже.
Где я нахожусь?
Любую WEB-страницу следует рассматривать как часть сайта и одновременно как некоторую независимую самостоятельную часть. На любую страницу сайта можно попасть в обход «главного» входа, в результате использования поисковых систем или прямой ссылки на данную страницу. Учитывая это обстоятельство, следует предусмотреть название сайта на каждой его странице, чтобы посетителю было сразу понятно, какой сайт он посетил. Также, необходимо, ввести заголовок раздела или статьи, чтобы показать посетителю, в каком месте он находится относительно самого сайта.
Какие страницы я уже посетил?
HTML позволяет использовать разные цвета для посещенных и не посещенных ссылок, чтобы разница между ними была заметна. Однако некоторые разработчики сайтов пренебрегают такой простой вещью, внося путаницу своим посетителям. По этой причине рекомендуют дублировать графическое меню текстовым эквивалентом, поскольку определить, переходили по графической ссылке или нет, можно лишь по рамке вокруг изображения. Но рамки вокруг таких ссылок добавляют весьма редко из соображений дизайна.
Какие разделы могу посетить?
Ссылки на разделы сайта должны быть на каждой его странице. Как уже упоминалось, каждая WEB-страница сайта, в некотором смысле, является независимой. Поэтому она должна содержать и его основные компоненты, в том числе и повторяющуюся от страницы к странице навигацию. Для посетителя тот факт, что список ссылок появляется всегда в одном и том же месте, позволяет использовать его не задумываясь. А повторяющиеся элементы дают возможность легко перейти к любому разделу сайта.
Физическое проектирование
Описание сервисов и технологий, необходимых для реализации запланированных возможностей сайта.
На этом этапе следует описать следующее:
технологии, которые будут применяться на сайте;
используемое программное обеспечение;
возможные проблемы и способы их устранения;
как будет обновляться информация.
После завершения данного этапа следует вернуться к концептуальному проектированию и проверить, не нужно ли внести изменения, в связи с переосмыслением проекта на других стадиях.
Так, если на сайте планируется использовать базы данных и доступ к данным с помощью CGI, следует подумать о хостинге, который поддерживает выбранные технологии. Возвращаясь к концептуальному проектированию, мы либо ставим себе цель разместить сайт на платном хостинге, затратив на это определенную сумму денег, при этом получая взамен дополнительные возможности. Либо окунуться в мир бесплатного хостинга, при этом часть возможностей просто теряется.
studfile.net