Magazyn T3
newsy, felietony, testy i tutoriale



Internet Maker

15/06/2007

Jak zbudowano MCDonaldsMenu.info

Więcej artykułów autorstwa »
Napisane przez: Tomasz Galanciak
Tagi: ,
e3-jak_zbudowano_mcdonaldsmenu_info.gif

Okoliczności powstania zdrowego serwisu dla McDonald’s.
Zespół The Marketing Store Worldwide zajął się kwestiami odżywiania a Boxer został poproszony o wykonanie projektu platformy komunikacyjnej oraz opracowania najlepszego sposobu, pozwalającego na zaangażowanie konsumenta.

Gdy pracuje się z takim klientem jak McDonald’s, projektowaniem i praca nad prezentacja marki zajmuje się zazwyczaj więcej niż jedna agencja. Dla potrzeb tego projektu nawiązaliśmy współprace z mieszcząca się w Birmingham agencja konsultacyjna Boxer (http://www.boxer.uk.com) oraz specjalistami zajmującymi się marka – The Marketing Store Worldwide (http://www.themarketingstore.com).

Gdy zespół The Marketing Store Worldwide zajął się kwestiami odżywiania, Boxer został poproszony o wykonanie projektu platformy komunikacyjnej oraz opracowania najlepszego sposobu, pozwalającego na zaangażowanie konsumenta. Było to duże wyzwanie, zważywszy na fakt, że odżywianie to bardzo poważne zagadnienie. Gdy zapadła decyzja o uruchomieniu testowego kiosku z dotykowym ekranem i dalszych pracach nad serwisem, Boxer zwrócił się do naszej firmy – Ralph.

Ubiegłoroczne przedłużone testy, które miały miejsce w Hiszpanii i Szkocji, trwały blisko trzy miesiące. Serwis musiał zostać szybko przygotowany, po Świetach Bożego Narodzenia, ze względu na konieczność opracowania go w wersji włoskiej, francuskiej i angielskiej na potrzeby rozpoczynającej się wkrótce (10 lutego) olimpiady zimowej. Serwis wystartował na początku nowego roku i zdobył popularność w czasie trwania olimpiady. W 2005 r. ukończyliśmy prace nad zestawem różnych stron wielojęzycznych.

  • Kolorowe kody.
    Cztery główne obszary serwisu przygotowano w różnych kolorach. Ma to usprawnić nawigację oraz ułatwić ich odróżnianie. Efekt rollover dla tekstu pojawiającego się w ikonach opracowano w HTML-u, wiele miejsca przeznaczono dla innych języków.
  • Zapotrzebowanie.
    Tu jasno zobaczymy braki w naszym wskaźniku dziennego zapotrzebowania. Możemy kliknąć i wyświetlić animowane grafiki, pokazujące w jaki sposób potrawy serwowane w McDonald’s wpływają na nasz wskaźnik dziennego zapotrzebowania.

  • Streszczenie.
    Opracowaliśmy tę sekcję, aby umożliwić użytkownikowi szybką i łatwą zmianę ich danych, co można wykorzystać przy porównaniach z przyjaciółmi lub członkami rodziny lub po to, by pokazać, jak na wskaźnik dziennego zapotrzebowania wpłynęłyby zmiany w codziennej aktywności.
  • Łatwy dostęp.
    Ikony znajdujące się w prawej górnej części kolumny informacyjnej umożliwiają szybki dostęp do ważnych informacji, a z pomocy kontekstowej można skorzystać zawsze, gdy jesteśmy na stronie, nawet bez konieczności opuszczania sekcji serwisu, w której się akurat znajdujemy.

Zdobyte wtedy doświadczenie okazało się bezcenne przy przygotowywaniu McDonaldsMenu.info. Było także ciekawym źródłem wiedzy o prawnych i kulturalnych ograniczeniach, z którymi mieliśmy do czynienia przy opracowywaniu różnych składowych projektu, takich jak ikony i kolory.

Pomysł

W założeniu serwis miał mieć pozytywny wydźwięk i powinien służyć poradami użytkownikom. Oparto go na ikonografii i projekcie przygotowanym w firmie Boxer, obejmującym także opakowania i wkładki na tace. System ikon symbolizujący odżywianie oparto na pięciu graficznych wyobrażeniach kluczowych elementów żywieniowych – kaloriach, proteinach, tłuszczu, węglowodanach i soli.

Przez kilka miesięcy ubiegłego roku do próbnych kiosków z dotykowym ekranem przeznaczonych na rynki Hiszpanii i Szkocji wielokrotnie wprowadzano poprawki, inspirowane sygnałami konsumentów. Kioski okazały się wspaniała platforma, pomocna przy rozwoju interfejsu strony. W testach użyto nawigacji opracowanej w kilku różnych wariantach – całość przygotowano bez zamieszczania treści na stronie.

Początkowe wytyczne skupiały się na informowaniu o tym, co było zamieszczone online, jako dodatek do udostępniania zasobów o większej szczegółowości oraz miejsca dla ludzi, które mogliby odwiedzać w sytuacji, gdyby nie znaleźli pełnej informacji o właściwościach odżywczych na opakowaniu. Bliska współpraca z Boxerem była dla nas wspaniała okazja obcowania ze struktura i projektowaniem serwisu i była to jedna ze wspanialszych zalet tego projektu. Wiedzieliśmy, że konieczne jest uwzględnienie niektórych czynników – łącznie z największym dotyczącym wielojęzyczności, i byliśmy w stanie udzielić porad, które
uwzględniano w projekcie od początku.

Budowanie bloków

Nie chcieliśmy zbytnio obciążać serwisu grafika lub zamieszczać wielu tekstowych przycisków ze względu na niejednakowa długość wyrazów w różnych językach, co mogło być źródłem potencjalnych problemów.

Z tego względu od początku prac tak ważne było opracowanie layoutu, który sprawdzałby się we wszystkich wersjach językowych. Zaprojektowanie szablonu serwisu działającego na wszystkich platformach językowych oznaczało konieczność przygotowania nawigacji wraz z cała struktura wykorzystująca system ikon.

Całość musiała być prosta, co było gwarancja, że serwis będzie działać z różnymi językami we flashu i HTML-u. Wszystko na stronie musiało być łatwe w użyciu, zwłaszcza kalkulator menu. Gdy tylko znalazł się na swoim miejscu, byliśmy w stanie docenić jego wagę i funkcje informacyjna, jaka spełnia. Odwiedzający serwis mogą obliczyć swój wskaźnik dziennego zapotrzebowania (ang. GDA – przyp. red.) i następnie, wybrawszy różne pozycje z menu McDonald’s, zobaczyć jak różne kombinacje potraw wpływają na dzienne wartości odżywcze. Skorzystaliśmy z Systemu Zarządzania Treścią, by utworzyć strony w animowanym flashu, które zachęcałyby klientów do interakcji i zabawy.

Grafika jest śmiała i zabawna, natomiast interfejs użytkownika intuicyjny. Jasne kolory wywołują przyjazne odczucia, które są w zupełnej opozycji do wrodzonego chłodu i sterylności obecnych na tradycyjnych stronach podejmujących tematykę żywieniowa.

Serwis zbudowano za pomocą XML-a, skorzystano te. z JavaScriptu do zarządzania danymi poprzez rozbudowany System Zarządzania Treścią. Zanim zawartość strony zostanie przetworzona do Flasha, jest obrabiana przez XML. Przy tworzeniu grafiki, która nie jest Flashem, skorzystano z Fireworksa, a poszczególne fragmenty HTML-a zostały złożone w całość za pomocą CSS 2.0.

Goście serwisu

To zabawne obserwować, jak ludzie bardzo chcą dowiedzieć co jedzą. Liczba odwiedzających serwis wzrasta codziennie i ten trend będzie się utrzymywać, gdy. niedługo pojawi się w pełni wielojęzyczna wersja strony. Szczegóły na temat serwisu pojawia się też na opakowaniach i wkładkach na tace. Celem McDonaldsMenu.info jest informowanie każdego, co je w restauracji McDonald’s. Boxer zaprojektował także darmowy przewodnik i wkładki do tac, aby wspomóc promocje serwisu.

Może Cię zainteresować:

  1. Jak zbudowano www.chivas.com
  2. Jak zbudowano www.tunetribe.com
  3. Jak zbudowano splittheatom.com


O autorze

Tomasz Galanciak





0 komentarzy


Skomentuj pierwszy!


Zostaw odpowiedź

Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone *

*

Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">