Като екип преминал през изграждането на доста и различни като дизайн и функционалност уеб-сайтове, бихме искали да споделим с вас най-важните моменти от планирането на такъв
Как да направим уеб-сайт?
В тази статия ще намерите нужни инструменти и програми, чрез които да положите основите при изграждането на сайт, планирането му от самото начало и така чак докато той не завладее Интернет пространството. Информацията ще е полезна, както за project manager- и в тази област, които работят с екип от дизайнери и програмисти, така и за хора тепърва навлизащи в този свят на невероятното удоволствие от това да създадеш един сайт. Представете си следното: вие сте архитект, от която работа зависи стабилността и красотата на бъдещата сграда. Преди да пристъпите към строителство, започвате най-напред с планирането на проекта и обърнете внимание на всеки един детайл. От това как да построиш сграда и от това, се оказва че има нещо общо. Информацията необходима ви за планирането, се съдържа в това да намерите подходящите строителни материали, да изберете колектива участващ в осъществяването на проекта, разрешителни за строеж, разпределение на финансите, списък с възможни кризисни ситуации и разрешението им, списъка продължава. Същият път трябва да извървите и при изграждането на уеб-сайт. Планирането му е изключително важна част преди започването, сякаш полагате основите на една сграда. По тази причина е важно да се доверите и на точните инструменти, които ще улеснят процеса. Да преминем и към действие… първа стъпка:
Стъпка 1: Project Brief
Събирането на необходимата информация около проекта може да ви отнеме и повече от ден. Имайте предвид, че в други етапи от процеса, е възможно да изникнат още данни по проекта и винаги има място за усъвършенстване. В тази първа стъпка, brain stormig-а с екипа е изключително необходим, тъй като обсъждането води не само до събиране на пълната информация, но и до раждане на креативни идеи.
Определете целите и очакваните резултати
Какви са целите на клиента и как си представя крайния резултат? Трябва да сте наясно с критериите за оценка на тези цели и очаквани резултати, за да сте сигурни, че вие и вашия клиент сте на една и съща вълна. Трябва да сте възможно най-точни: целите и резултатите да са количествени и измерими.
Brainstorm с клиента
Помолете клиента да ви разкаже за неговата идея. Попитайте го – „Каква е вашата идея за това как да направим уеб-сайт успешно“? Всичко, което успеете да „изкопчите“ още от самото началото, би ви улеснило работата занапред. Това, което научавате на този етап, ще бъде основната информация, на която ще стъпите. Бъдете търпеливи, съсредоточете се върху това, което казва и не се поддавайте на изкушението да задавате предварително въпроси. Вашите идеи и забележки могат да почакат. Още един важен съвет от нас – водете си записки. Ако клиента влага емоция и е напълно въвлечен от идеята си, бъдете сигурни, той ще е в голяма помощ по време на процеса.
Обсъдете с ръководителя
Срещнете се с хората, които взимат най-главните решения. Обсъдете сроковете, както и разпределете бюджета, ресурсите и т.н. Организацията има значение, голямо значение! Трябва да бъде съставено начално задание, по което да се ръководите при полагането на основите.
Стъпка 2: Определете целите на сайта
Да, за клиента целите могат да са увеличаване на продажбите, увеличаване на офлайн пазарния дял чрез онлайн маркетинг, да ангажира клиентите и да спечели тяхното доверие. Истината е, че целите определят посоката за целия производствен процес при изграждането на един сайт. Освен да определите целите на уеб-сайта, изгответе критерии за успех според желанието на клиента. Един добър начин е като използвате SMART критерия, което означава всяка цел да бъде:
- специфична (Specific)
- измерима (Measurable)
- постижима (Attainable)
- приложима (Relevant)
- обвързана със срокове (Time-bound)
Резултатът
Като резултат имате документ съдържащ:
- списък с целите на проекта
- списък с целите на клиента
Този документ трябва да бъде подписан от клиента и от управителя на фирмата, човека който взима решенията.
Стъпка 3: Задайте таргет и определете аудиторията
Този етап включва проучване на таргет аудиторията. Трябва да определим към какви типове потребители ще бъде насочен сайта, както и техните нужди. Разбира се, това се случва на базата на услугата или продукта, както и на неговата характеристика. Дизайна на потребителския интерфейс до голяма степен зависи именно от резултатите на този етап. Социални характеристики: пол, възраст, образование. Психологическа характеристика: начин на живот, интереси, хобита, личностна характеристика. Локация: държава, град, регион – това е полезна информация. Геотаргетирането ще ви е необходимо, за да намерите точните клиенти, които биха се възползвали от вашата услуга или продукт. Характеристика на нуждите на потребителя: Защо вашите потребители трябва да се регистрират точно във вашия сайт? За какво ще им помогнете? Как ще ги улесните с вашия продукт или услуга? Вие определяте тяхното „болно място“ и само вие можете да го разрешите с вашия сайт! В началото ще е трудно да получите пълната информация. На по-късен етап можете да направите потребителско проучване и попълване на анкети от страна на потребителите. Важното е да се знае, че съдържанието на сайта и copywriting-а силно се определят от местоположението на потребителя. Ще ви се наложи да отделите време и на това, когато сте на етап разпределение на информацията и конструирането на сайта.
Стъпка 4: Анализ на конкуренцията
Кои са вашите преки и косвени конкуренти? Винаги има конкуренти. Дори идеята да е напълно уникална, има най-малкото непряка конкуренция.
- Преките конкуренти могат да бъдат тези, които работят със същата потребителска база като вас и предлагат аналогичен продукт или услуга. Пример за такава: Microsoft Windows Apple Mac OS
- Косвените конкуренти – тези, които предлагат подобен продукт като вашия, но само частично отговарят на целевата аудитория.
За да си гарантирате успеха на проекта, трябва да знаете вашите конкуренти и да имате добри идеи, за това как да ги изпреварите. Необходимо е да направите анализ на конкуренцията, включително изследвания на базата на маркетинг проучвания, Интернет и печатните медии. Не се ограничавайте само до рамките на нашата страна, а погледнете и към международните сайтове, които правят подобни на вашите неща. Ще видите колко цветно и интерактивно е всичко, а и ще ви се отрази доста вдъхновяващо.
SWAT Analysis
Струва ви се абсурдно да седнете и да пишете отрицателни, положителни черти на конкуренцията, възможни препятствия или добри дивиденти за вас, нали? Повярвайте, струва си! Помага ви нагледно да видите възможностите на проекта. Докато анализирате конкуренцията, можете да откриете интересни идеи и полезни функции за вашия сайт.
Резултатът
- Имате списък с преки и непреки конкуренти
- SWOT анализ на всеки конкурент
- Обобщение на проучването – идеи и възможности.
Стъпка 5: Погледнете с очите на потребителя
Доста често ние, от Grind Web Studio се опитваме да преминем от другата страна, тази на нашия клиент. Какви са неговите цели? Какво иска да постигне с посещението си на сайта? Както и от страна на неговия клиент – какви са неговите нужди, също как да го улесним при използването на сайта. Това е изключително важно, когато искате да постигнете максимално добри резултати и имате ясна цел.
Целите на потребителя
Всеки човек си има своите краткосрочни и дългосрочни цели. За нашия проект – изграждане на уеб-сайт, ние идентифицираме целите на потребителите от целевата група, анализираме ги и предоставяме готово решение. И работата е чиста! Като казваме цели, имаме предвид основни необходими цели. Някои клиенти смятат, че като повечето потребители слушат музика онлайн, трябва и техния сайт да предоставя тази услуга. Колкото обаче функции извън основния фокус добавяте, толкова повече по-разредени стават основните цели.
Проблеми на потребителя
Само когато имаме списък с конкретни цели, можем да определим и конкретните проблеми. Например: целта на даден потребител е да намери инвеститор, който да вложи в осъществяването на проект за строеж. По-сложно е от колкото изглежда. Как да намерим правилния инвеститор? Важна ли е локацията? Как потребителя бързо да направи своя избор, въпреки многото зададени оферти. Ако си задаваме въпроси, идеите идват лесно.
Нашето решение
Ще ни трябва таблица, която да е на принципа – цел-проблем-решение. Така нагледно ще си визуализирате ситуацията и лесно ще намерите решение на всичко. И не забравяйте… поставете се на мястото на потребителя.
Резултатът
Като резултат имаме подобна като тази таблица, която да използваме във всеки един момент до края на планирането.
Стъпка 6: Проследете действията на потребителя
Един от начините да „влезете в обувките“ на потребителя, е като бъдете и вие такъв за собствения ви сайт. Методът scenario mapping или customer journey е посветен на това да проследи възможните потребителски стъпки във всички аспекти на сайта. Този сценарии може да разкрие нови идеи, слаби места на проекта или нови възможности. Той може да бъде предпоставка за добри потребителски потоци по-късно. Ето и един пример: Място: сайт за обзавеждане Цел на потребителя: закупуване на диван онлайн Да вземем за пример сайт за онлайн пазаруване и да направим сценарии на стъпките на потребител: 1. Влизане в началната страница на проекта 2. Избиране на секция „Мебели“ от менюто 3. В „Мебели“ разглеждане на под-категориите и кликване върху „Дивани“ 4. Разглеждане на предоставените видове дивани за продажба 5. Кликване на избрани 6. Разглеждане на отзиви, коментари, описание, размери и снимки на съответния продукт 7. Запазване на избрания в „кошница“ 8. Кликване на профил – кошница 9. Кликване върху избрания продукт 10. Попълване на форма за закупуване на продукта 11. Подаване на заявка за закупуване на продукта 12. Излизане от страницата Когато преминахме през този сценарии, решихме да добавим още възможности за потребителя, като: „Прочетете също….“, връзки с магазини за домашно или офис обзавеждане, статии с интересни идеи и съвети по темата, страници с допълнителна информация. Както виждате, сценария ни помага да намерим възможности за подобрение. Разбира се, вие можете да създадете такъв за всякакъв вид сайт – за корпоративен или новинарски, блог или електронен магазин.
Стъпка 7: Mind Mapping
Когато имаме един куп идеи, най-добрия начин, за да ги запазим е просто да ги визуализираме и взаимно да ги свържем. Идеята на mind mapping-а е да създадем нещо като карта, състояща се от логически свързани идеи, помагащо ни да премахнем и ненужните неща. Досещате се, че има и програма, която отново „да ни улесни живота“. Подходяща за тази цел е Xmind. Изтеглете и научете как се ползва от тук Да си представим, че ще работим върху изграждането на сайт за недвижими имоти. Напишете на лист вашите идеи и се опитайте да ги разделите под формата на логически свързани категории. Категориите към менюто на уеб-сайта, биха могли да бъдат:
- Информация за дейността на фирмата
- Каталот – осъществени, в процес на строеж и завършени проекти
- Блог/Форум
- Информационен център
- Контактна форма
Добавете към картата и всички идеи, свързани с тези категории – под-категории, информация, картографиране. Ако една идея се вписва в повече от една категория, изберете най-подходящата. Всяка една категория, трябва да се планува логично. Не забравяйте за функции, характерни за определена категория. Например: възможност потребителя да дава оценка на даден имот. На нашия mind mapping, тази функция и категорията, към която спада (в случая, тя ще отиде в категория „Каталог“), ще бъдат свързани със стрелка, която да обозначава зависимостта им. Можете да вмъквате и ваши собствени символи, за да обозначите различни функции. Изключително полезно, особено ако проекта е голям.
Резултатът
Като резултат от работата ни, имаме карта с всички категории, информация и функции, необходими за изграждането на сайта. Можете да добавяте идеи дошли в процес на работа, както и да се ръководите от тази карта през целия процес на изграждането на уеб-сайта.
Стъпка 8: Структуриране на информацията
След като вече имаме подробна карта на бъдещия ни сайт, можем да започнем със структурирането на наличната информация, която ще бъде в основата на прототипа на сайта. Visio е помощника, който се „притичва“ на помощ. С него ще имате възможност да създадете професионални схеми, за да опростите сложната информация. Притежава допълнителни инструменти, както и данни, свързани с оформление на диаграми. Сложете флагове, индикатори, диаграми, развихрете вашето въображение и направете визуални решения. От тук можете да преминете през курс за обучение, който ще ви е полезен при понататъчната ви работа с Visio.
Резултатът
На този етап трябва да сте абсолютно доволни от себе си. Вече нагледно виждате как напредвате и сте близо до желания резултат по планирането на сайта. Ето още полезна информация при структурирането на информацията:
- https://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/
- https://sixrevisions.com/content-strategy/content-mapping/
Стъпка 9: Направете прототип на сайта
Преди вашия екип от програмисти да започне с кодирането, препоръчваме да тествате сайта, за да проверите дали вашата работа по структурата и последователността е дала добри резултати. За създаването на един такъв прототип или направата на така наречените mockup, ви е необходим Axure. На всеки един етап от направата на прототипа на сайта, трябва да се опрете на mind mapping на диаграмата с информационната структура, през които вече преминахте. Прототипът на началната страница не е необходимо да бъде тестван първо. Например, в случай на онлайн магазин или блог, страницата с даден продукт или страницата с блог поста са най-важните и обикновено задържат вниманието на потребителя най-дълго. При създаването на прототип на всяка страница от уеб-сайта, трябва да се съсредоточите върху това как потребителя ще достигне до неговата цел. Преди изготвянето на прототипи, опреснете информацията си за вашата целева аудитория, използвайки предишните етапи от процеса на изграждане на уеб-сайт.
Прототип на основната навигация на менюто
Основната навигация на менюто е първото, което създавате при изграждането на началната страница. Отбележете колко колко броя категории ще присъстват в лентата от менюто и колко под-категории от падащото меню.
Прототип на горната част от началната страница
Следващата стъпка е да създадем прототип на т. нар. Header. Сърфирането из Интернет пространството ви е дала вече тази информация и както се досещате, тук трябва да присъстват:
- основното навигационно меню
- търсачка
- контакти
- лого
Прототип на полето с основната информация
Независимо дали става въпрос за услуга или за определен продукт, при всички положения текста и информацията предназначена за потребителя е от съществена важност. За Google също. В body зоната ще се съдържа специфичната информация за уеб-сайта, неговото предназначение и функционалност или описание на това, което искате да представите на вашия потребител. Това е, както се казва „сцената“ на вашия уеб-сайт. Направете блокове със съдържание (вижте по-надолу изображенията), разположение така както отговаря на критериите на дизайна на сайта. Някои ще са постоянни за всички страници, а други ще са предназначени само за началната страница.
Прототип на долната част от началната страница
Footer-а обикновено остава един и същ за всички страници и дублира основното меню, което е в header-а. Съдържа:
- помощна информация
- контакти
- връзки към социални мрежи
- информация за поверителността на сайта и авторските права
Обратна връзка
Дойде и часът на обратната връзка от страна на клиента, което е важно за това, по какъв път ще поемете от тук насетне. Клиентът може да преразгледа всичко и да предложи някои корекции. А както подразбирате, на този етап корекции са напълно възможни и са добре дошли. Всичките идеи в нашата карта (mind mapping) трябва да бъдат намерени в този прототип. Да не е останал нито един детайл, който да сме пропуснали. Бъдете уверени и сигурни за всяка една подробност, все пак това е вашето творение, за чиято направа сте вложили много труд.
Тестване на прототипа – стъпките на потребителя
Това което направихме по-рано, да направим scenario mapping или да проследим възможните стъпки на потребителя от влизането му в сайта до достигането на целта му. Основната цел е да се гарантира логичен ред на всяко действие. Това е етапът, който изисква най-много търпение и внимание. Ако сайтът ви е малък и има малко създадени страници, съответно прототипи, няма да изисква толкова време. Гответе се обаче за приключение, ако ще предлагате на потребителя голям и съдържателен сайт. Резултатът би изглеждал така:
Стъпка 10: Тест за ползваемост
Това е един от най-добрите начини да проверите „действа ли“. Както и да направите промени на възникнали препятствия, които ако не коригирате сега, ще ви костват връщане в изходна позиция на по-късен етап от процеса. Axure генерира HTML от прототипи, като ги прави интерактивни и готови за тестване от потребителите. За целта, даден потребител с характеристики като от целевата група „изследва“ сайта, а пък вие от ваша страна следите неговите стъпки. Важното за нас е да имаме наблюдение как той успява да достигне определени страници и да постигне целта си в рамките на сайта. Накрая правим финалните корекции.
Резултатът
Като резултат ще получите най-добра представа, как на потребителя ще му се налага да общува със сайта. Ако той с лекото използва и борави с информацията, значи мисията е изпълнена.
Етап 11: Спецификация на проекта
Последния етап от процеса по изграждане на уеб-сайт е да създадете документ със спецификацията на проекта. Спецификацията на проекта е резултат от всички етапи, през които сте преминали при планирането. Спецификациите трябва да бъдат пълни, детайлни, изчерпателни, но и кратки. Трябва да се съдържа цялата информация по отношение на софтуер и уеб технологии, необходими за уеб-сайта, както и всички направени прототипи. След като спецификацията на проекта е одобрена, изработката на уеб-сайта започва… Как да направим уеб-сайт?