Witam w trzecim artykule cyklu dla webmasterów pt."UX-owe podejście do doboru templatki", dzięki któremu będziecie mogli nauczyć się jak sprawnie przepracować fazę koncepcyjną z Klientem i wdrożyć templatkę do dowolnego CMS-a. Metodologia tutaj zaprezentowana czerpie garściami z tzw. "podejścia UX-owego" (ja tak to nazywam), w którym centralną częścią jest Użytkownik (tzw. User-Centered Design), a wybory, których dokonujemy jako Wdrożeniowiec, zorientowane są na podniesienie efektywności działań tego Użytkownika w drodze do osiągnięcia sukcesu.
Kolejny nasz Klient: mała, lokalna sieć burgerowni
W tym artykule opiszę przypadek stworzenia nowej strony internetowej dla małej, lokalnej sieci burgerowni, mieszczącej się w dużym mieście wojewódzkim. Burger Hut to powstała dwa lata temu sieć punktów (obecnie 4) serwująca burgery z dodatkami i napojami.
Burger Hut to przede wszystkim dobre jedzenie w dobrej cenie. Sieć zorientowana jest na osoby młode, kupujące na wynos, również z dowozem. Miejscówki Burger Hut są nieduże (przeważnie obszar udostępniony klientom nie przekracza 10 metrów kwadratowych), umiejscowione są na osiedlach z tzw. "wielkiej płyty", a także w centrum biznesowym, w obrębieg jednego miasta 350-tysięcznego. W menu sieci znajdziemy 8 rodzajów burgerów (3 rodzaje bułek do wyboru), kilka rodzajów dodatków (np. frytki, talarki, sałatki), a także napoje. Głównymi klientami są młodzi ludzie poszukujący szybkiego posiłku, również grupy młodzieży i rodziny spacerujące po osiedlach. Sieć posiada własną domenę, która przekierowuje na profil firmy w serwisie Facebook. Włodarze sieci potrzebują jednak strony dedykowanej kilku grupom odbiorców: klientom (poznanie marki), a także potencjalnym franczyzobiorcom.
Firma posiada leciwe już logo, które jednak na chwilę obecną "musi wystarczyć".
Kolory brandu to głęboki brązowy (jak grillowany burger wołowy) i brąz o zabarwieniu miodowym, tak, jak flagowy sos podawany do burgerów.
Użytkownicy
Postanowiłem wyodrębnić dwie grupy odbiorców: młodzież szukająca wysokiej jakości fast-foodowego jedzenia i pracownicy korzystający z Burger Hut-a przy okazji przerwy obiadowej:
Dopasowanie
W tym przypadku skorzystamy z templatki, która daje możliwość modnego zaprezentowania głównego produktu, czyli pysznych burgerków, a mianowicie #57779. Duże przestrzenie na obrazy, ciekawy układ i "jedzeniowa" typografia to główne zalety tej templatki.
Komentarz wdrożeniowy
Templatka wybrana pod to konkretne wdrożenie jest kompatybilna z najświeższą linią Joomla, korzysta z Bootstrapa w wersji 3.0. Mamy tu kilka ciekawych rozwiązań, jak slajder na stronie głównej i efekty tranzycji treści, która pojawia się przy scrollowaniu.
Architektura informacji
Po pierwszej rozmowie z Klientem okazało się, że potrzebujemy tylko czterech pozycji w menu: o Nas, Menu, dla Franczyzobiorców, Kontakt.
Nie będziemy tworzyć galerii jako osobnego elementu w nawigacji, ponieważ samymi lokalami "nie ma co się chwalić" (cyt. Klienta), ale już w menu jak najbardziej przedstawimy wygląd wszystkich rodzajów burgerów. Wszystkie elementy to tak naprawdę pojedyncze artykuły statyczne, z tekstem i zdjęciami. Prosta robota!
Funkcjonalności
Potrzebujemy następujące funkcjonalności:
"Zagramy" tu przede wszystkim stroną główną, na której można stworzyć doskonały mariaż zdjęć i tekstu opisującego Burger Hut. Pod linkiem "o Nas" możemy przedstawić historię i filozofię firmy. Linki "Menu" i "Dla Franczyzobiorców" będą prawdopodobnie bardziej spokojne w prezentacji treści (korzystając ze styli typu: https://livedemo00.template-help.com/joomla_57779/index.php/pages/elements). Mamy też ciekawą podstronę kontaktową, z której skorzystamy w naszym przypadku.
Propozycja zmian w stylach (CSS)
Nasza templatka jest przede wszystkim czarno-biała, a kolory wprowadzają zdjęcia. Nie inaczej będzie w naszym wdrożeniu, ale pozwolę sobie zasugerować kilka drobnych zmian.
Kolory naszego brandu w heksach to:
- musztardowy-brązowy-pomarańczowy (jakkolwiek by go nazwać) #DDB03E;
- głęboki brąz #51412B;
- i prosty biały, dopełniający, którego w naszej templatce mamy pod dostatkiem #FFFFFF;.
Postanowiłem zmienić jedynie kolor czarny fontów na białych elementach na kolor głębokiego brązu tak, by templatka wyglądała bardziej spójnie z firmowym brandem:
.icemegamenu > ul > li.active > a.iceMenuTitle, .icemegamenu > ul > li.hover > a.iceMenuTitle {
color: #51412B;
border-bottom: 2px solid #51412B;
border-top: 2px solid #51412B;
}
.icemegamenu > ul > li > a.iceMenuTitle {
color: #51412B;
}
h1 {
color: #51412B;
}
body {
color: #51412B;
}
.btn:not(.dropdown-toggle), .kbutton:not(.dropdown-toggle) {
color: #51412B;
border-bottom: 2px solid #51412B;
}
.page-header *[class*=heading-style]:after, .page_header *[class*=heading-style]:after {
border-top: 2px solid #51412B;
}
.page-header *[class*=heading-style] .item_title_part_last:before, .page_header *[class*=heading-style] .item_title_part_last:before {
border-top: 2px solid #51412B;
}
Nie są to oczywiście wszystkie poprawki, które powinniśmy wprowadzić, ale dzięki tej próbce z pewnością będziecie w stanie dokonać dalej idących zmian, a przede wszystkim podpasować kolorystykę templatki pod Wasz konkretny przypadek wdrożeniowy.
Podsumowanie
To by było na tyle. Oczywiście nie wyczerpałem tematu - ten artykuł to jedynie "zajawka" do tego, byście samodzielnie mogli spojrzeć na templatki z innego poziomu: bardziej analitycznie, profesjonalnie, dobierając rozwiązania pod konkretne potrzeby. Do zobaczenia w następnym artykule.
Wszystkie znaki firmowe i marki, nazwy firm i osoby zostały wymyślone na potrzebę tego artykułu. Jakiekolwiek podobieństwa z tworami ze świata realnego są niezamierzone i przypadkowe.
Głosowanie zostało zamknięte. Kolejny artykuł z cyklu będzie poświęcony templatce z branży "Grafika i projektowanie" i pojawi się w styczniu 2017 roku.