Колко пъти сте завършили проект, само за да погледнете назад и да кажете: 'Ако само можех да се върна назад във времето и да го направя отново с това, което знам сега!?' Поне съм се замислял.

Това се случва на всички нас; развълнувани сме от нов проект. Шегуваме се с клиента за текущия уебсайт, подписваме договорите и след това стартираме плановете и прототипите. Що се отнася до малки проекти, този тип стратегии биха могли да работят. Но когато става въпрос за големи проекти, внезапен растеж и непланирани промени след първото представяне. И ако все пак завършите проекта, вероятно ще се окажете със следа от очите, която изглежда като това, което трябваше да поправите, само че тази ще изглежда малко по-добре от оригинала.

Страхотният дизайн на работния процес започва с добър процес на планиране. Tweet

Добър дизайн и добро потребителско изживяване Те не започват с привлекателен прототип или макет, или план, а с концептуална основа, която се фокусира върху целите на компанията. И тези цели не са „Нека направим по-опростен и красив уебсайт“. Тъй като сте отговорни за UX Y. ЛУК (Потребителски опит и потребителски интерфейс), така че е необходимо да се гарантира, че потребителите имат най-доброто изживяване в проектирания интерфейс. И за да постигнете това, трябва да планирате задълбочено от самото начало.

Първоначални изследвания за дизайн на уеб страници

След първоначалното разследване на клиентско поле И неговият конкуренция , следващото нещо е да знаете с какво да започнете. Можете да имате отделна цена за този анализ (която ще бъде включена в окончателната оферта на проекта). Това ще избегне високи и двусмислени цитати, които трябва да включват всякакви елементи, които излизат по-късно.

Клиентът, който трябва да се разглежда като пример, е организация с нестопанска цел в областта на археологията. Компанията изследва и защитава археологически обекти в югозападната част на страната. В момента уебсайтът е диво дезорганизиран. Представете си планини и планини с свободно организирано съдържание на стар cms портал. Имайки това предвид, първата стъпка е да организирате съдържанието си.

Стъпка 1: Запознайте се със Съдържанието

Когато строите нова къща, вие не рушате всички стени, без първо да премахнете онова, което е вътре в нея. Първата цел би била да влезете във всички стаи и да премахнете цялото съдържание. В Design Speak трябва да преминем към всички входове и да определим кои трябва да са статични и кои да имат материал, който да бъде пост тип.

Наличието на информация може да създаде стратегия за по-добра организация на сайта. По принцип не се проверява кое трябва да бъде елиминирано окончателно и кое не, тъй като в реалния свят не се работи по този начин. Всяка част от портала е възложена на работен екип, защото има много съдържание. Най-добре е да класирате всичко на първо място.

Обикновено започвате с главната страница и след това се анализират останалите страници. По този начин имам контур на уебсайта преди първата среща. Въпреки че това не е така за проекта, който имаме тук, защо повечето връзки са скрити в съдържанието и не са достъпни в първоначалната навигация на портала, (ако офертата на проекта се основава на основната навигация или основната страница, това ще бъде моментът, в който съжалявате). След като се разговарят с различни хора от екипа на клиента, ситуацията може да бъде изяснена, за да се продължи.

В крайна сметка решението беше да се говори с клиента и да се проведе мозъчна атака ( мозъчна атака ). По време на тази сесия клиентът беше помолен да идентифицира характеристиките, съдържанието, работния процес и фокуса на уеб страницата. След това бяха установени следните ядра ( основни типове ), някои са нови, а други вече са установени:

Най-трудната част от този проект е, че връзките не бяха достъпни на пръв поглед, а скрити в съдържанието на сайта. И след като клиентът и неговият екип бяха обсъдени, проектът можеше да продължи.

Стъпка 2: Създаване на фокус, опростяване и организация

Със съдържанието на къщата извън къщата, опаковано и етикетирано, е време да се направят плановете за нова къща, която ще има по-добър стил и ще покаже съдържанието по по-добър начин. Но преди да стигнете там, трябва да се създаде фокус.

Според клиента потребителите, които посещават уебсайта, търсят информация за археологията, като своите изследователски проекти, виждат предстоящи събития или четат месечното списание. Въпреки че това са областите със съдържание, където потребителите попадат, уебсайтът не се върти около тях; За да намерите фокуса на портала, трябва да обърнете внимание на ядрото на организацията.

Беше определено, че „местоположението“ е в центъра на съдържанието. Без местоположението или местоположението няма да съществуват археологически обекти, руини, музеи или изложби. В основата си археологията се върти около места.

След като се съсредоточите, е време да опростите и организирате. По-долу е съдържанието, изтеглено от сайта, което не е свързано с местоположения, като страници на екипа, годишни отчети и т.н. След сортиране и категоризиране на съдържанието се получи тази карта:

Сега имате две основни области „За да направите“ и „Местоположения“. В „Неща за вършене“ са обхванати всички теми, свързани с организацията, докато в „Места“ е обхванато съдържанието, свързано с конкретно местоположение. Обикновеният потребител може да не знае името на видеото или проекта, но местоположението, където е разработен. Например в раздела за проекти потребителят може да намери този, който го интересува, чрез местоположението му.

Също така има цвят за всеки тип публикация. От организационна гледна точка онлайн събитията, изложбите, класовете и изложбите са по същество събития, само че има различни видове.

На текущия сайт имаше статична страница за списание и една за магазина. Беше решено да се премахне допълнителната стъпка при отиване до магазина и вместо това да се съхранява шаблон за статии от списания. Останалото е просто: страница с информация за организацията, директна връзка към магазина, страница за дарения (защо тези страници генерират печалба и се нуждаят от раздел в основния браузър), също нови страници за актуализации и връзка директно към магазина / дарения. Тъй като тези страници правят пари, те заслужават място в основната навигация. Сега имате плана на проекта и е време да свържете съдържание към него.

Стъпка 3: Циклиране на клиента

В показаната по-горе карта на сайта са включени типовете страници, но не и съдържателната карта. Както може би вече знаете, повечето проблеми възникват, след като клиентът започне да добавя съдържание към сайта. За да се избегне тази ситуация, от началото се прави цикъл с клиента. Следващото нещо е да създадем документ на Google с картата на сайта, която имаме, и след това да го изпратим на клиента, за да ни каже какво е текущото съдържание и как искат да го картографират в новата структура.

Ако нещо не се побере, може да се реши по-късно. Това е една от най-важните стъпки, тъй като тя не само включва клиента, но и ни уведомява за всички проблеми със структурата, преди да започне внедряването. За проекта, с който се занимаваме, се оказа, че някои елементи от картата на сайта са променени по отношение на менюто; Тъй като клиентът имаше няколко страници за дарения, решението беше да се създаде уникална публикация за тях.

Създаване на визуална структура чрез Wireframing

Следващото нещо е да създадете визуална структура за сайта. За да може системната функция да работи успешно и да постигне идеята за „всичко, свързано с местоположението“, беше създадена двупосочна връзка между различните видове постове.

Ето идеята: Когато посетител пристигне на археологическия обект и избере Гранд Каньон, той не само ще види информацията за мястото, но и ще намери събитията, проектите, изложбите и всичко друго, което клиентът е свързал във връзка с него към страницата на Гранд Каньон. И така получаваме нещо подобно:

Страницата с индекси на местоположенията показва най-новите места в горната част. Лентата за търсене е първото нещо, което потребителят ще види при влизане в страницата. Когато потребителят влезе в сайта, той ще може да види картата на Google на 80% от екрана и когато избере точка върху нея или разглежда страницата, ще се появи мрежата от списъци, за да улесни тяхното търсене.

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

При това оформление потребителят ще започне от заглавката на сайта и след това ще продължи към блока за съдържание и след това информацията вдясно. Всеки свързан сегмент от съдържанието се показва в съответствие с уместността и важността. Ако потребителят чете например за Големия каньон, това вероятно ще бъде последвано от снимки и карта на мястото.

Този сайт по същество е образователен, така че „Отношението до това място“ ще дойде по-късно. Тъй като клиентът няма много уникална информация, свързана с всяко местоположение, едва използваното съдържание е комбинирано в уникален блок под менюто на сайта.

Поставянето на миниатюри на списанието и видеоклипове в свързано съдържание добавя допълнителни визуални елементи и насочва потребителите към страницата „купуване“. Страницата се прави, като ви показва местоположенията, тъй като това стимулира потребителите да продължат да сърфират в уебсайта.

Следващата стъпка е да продължите с тази структура за други видове публикации. Ето някои от тях:

Сега, когато имаме общ модел за типове публикации, мога да се съсредоточа върху главната страница. Както при всеки потребителски интерфейс, първата стъпка е да се достигне целта на началната страница. Проучванията на клиентите показаха, че много потребители се натъкват на сайта, без да разбират напълно какво представлява. Следователно въведението и текстът за приветствие трябва да бъдат първото нещо, което потребителите виждат. Новият централен фокус се върти около места и това трябва да бъде вторичният блок, последван от случващото се на ArchaeologySouthwest.org (текущо списание, блог, събития, новини и т.н.). Това е итерацията на процеса на проектиране:

С V1 беше създадено основно оформление, което прилича на началната страница. Няма много йерархия; Първото нещо, което потребителят ще види, е избраното място и след това ще се загуби в колоните. С V2 беше създадена отделна колона, която улеснява проследяването. Все пак има място за подобрение. Тук знанието за съдържанието играе важна роля. Известно е, че ArchaeologySouthwest.org има не повече от две събития едновременно, така че няма смисъл да има много на началната страница. Във V3 фокусът е върху предстоящите събития, така че ако ще има повече от две, потребителят може да щракне върху бутон „още“ и да види останалите. Допълнителен акцент беше поставен и върху текущото списание, тъй като то е източник на пари на клиента. Потребителите започват отгоре и с използването на F модел се придвижват надолу. Така че сега потокът на окото е Местоположение> Добре дошли> Списание> Събития> Новини.

Сега, когато имате визуална рамка и структура на сайта, е много по-лесно да укрепите функциите и как нещата ще работят. Имате още една среща с клиента, за да разгледате действителната функционалност (сега излиза на светло) и потока от взаимодействие с потребителя. Известно е, че в крайна сметка все пак ще има корекции, но това ще бъдат само корекции, а не промени в целия процес. Най-важното е, че няма да има изненади.

Дизайн на уеб страница

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

Започвайки с Типография

Типографията е основата на добрия дизайн и затова е определена от самото начало. По-голямата част от неговата идентичност използва шрифтовете Univers Condensed Light и Adobe Caslon. Нямаше правила за това кога трябва да се използва Adobe Caslon, но беше отбелязано, че той не се използва толкова често, колкото Вселената. Проведено е малко типографско проучване, за да се види кои шевове създават най-добрата среда за скромна, професионална организация с нестопанска цел, без да изглежда по-различно в сравнение с настоящата гаранция.

Когато правите сравнения на шрифтове, е ясно, че Adobe Caslon ще свърши чудесна работа като шрифт на заглавието и Universe за субтитри. Наличието на основните заглавия с главни букви дава на марката по-личен щрих. Наличието на всичко с главни букви кара Археологията да се чувства като юридическо лице.

За основните заглавия ще използвате Adobe Caslon и ще използвате Univers Condensed Light за всичко останало, за да съответства на настоящата ви гаранция за марка.

Създаване на външния вид на уебсайта

Те искаха да създадат леко и отворено изживяване за потребителите, които трябва да смятат, че тази организация с нестопанска цел ги приема сериозно, без да са студени и корпоративни.

Въз основа на данните за анализ, по-голямата част от посетителите идват от настолни компютри (вероятно защото повечето хора посещават сайта, за да направят изследвания) и следователно първоначалният фокус беше върху дизайна за потребителите на настолни компютри. Това се оказа окончателният дизайн:

Когато влизах от настолен компютър, исках потребителите веднага да видят посоченото местоположение, текст за приветствие и предстоящи събития, последвани от част от заглавието на списанието. По този начин хората могат да видят какво прави компанията и какво популяризират, преди да се наложи да превъртат на повечето преносими устройства. Използването на мека сянка в лявата колона му дава повече внимание и затвърждава йерархията.

При мобилните устройства приоритетите са малко по-различни, тъй като потребителите имат достъп до информация в движение, събитията са по-важни и следователно са по-високи в списъка. Пълното оформление завършва така:

Актуализиран бутонът за дарение в долния колонтитул, за да бъде по-откровен, като го промените на изречение вместо бутон.

Създаване на почивка

След това тази дизайнерска концепция може да бъде приложена по същия начин и в другите ни дизайни.

Със сигурност знаем, че потребителите идват на страницата с подробности по две причини: Или те искат да научат повече за забележителността, или вече знаят за това местоположение и търсят само информация (адреси, телефонни номера и т.н.). Ето защо е важно да представим и двете опции незабавно, за да не губят време нашите потребители в търсене.

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

Клиентът няма да има много видеоклипове и списания, свързани с всяко местоположение, затова показваме само статии и ако има нещо друго, той може да кликне върху връзката. Мобилният изглед се свива според очакванията, като първо се показва съдържанието, а след това метаинформацията. Видеоклиповете и списанията са направени последни на нашата мобилна страница, тъй като те са по-малко важни за мобилните потребители. Други вътрешни секции следват същата структура и телени рамки, за да създадат добро изживяване и постоянен поток.

Разсъждавайки върху процеса на проектиране, може да се види, че по-голямата част от времето е прекарано в организиране и планиране. Докато само 30% от времето беше отделено на дизайна. Често пъти, когато дизайнерите показват работата си, те са нечестни относно това колко време е отделено за организиране на документи на Google, вместо да правят наперен макет. Толкова много други дизайнери се впускат направо в макети и в крайна сметка имат дерайлирали проекти и недоволни клиенти. Няма начин да планирате, просто трябва да се направи, ако искате да имате успешен проект. Оставете ни вашите коментари за това как е вашият процес или как той се различава - Би било интересно да видите работните потоци на други.