Projekt interfejsu informacyjnego to przede wszystkim dopracowana i dobrze przemyślana architektura informacji wraz z odpowiednimi funkcjonalnościami danego rozwiązania.

 

Szata graficzna pełni ważną rolę dopełniającą i pomaga prowadzić użytkowników przez strukturę informacji prezentowaną w serwisie.

Proces projektowania interfejsu graficznego w metodologii WebService dzieli się na kilka etapów, których zadaniem jest analiza oraz projektowanie warstwy informacyjnej i szaty graficznej. Na podstawie charakterystyki poszczególnych etapów projektowania chcemy pokrótce przedstawić jak przebiega ten proces i jakie daje efekty.

Pierwszym etapem prac przy projektowaniu interfejsu czy rozbudowanej publikacji internetowej jest analiza, której zadaniem jest jednoznaczne określenie wytycznych projektowych dających odniesienie na etapie późniejszych prac zespołu projektowego. Analizie podlegają cele i założenia projektu, specyfika branży i przedmiotu serwisu, oraz szereg grup tematycznych dotyczących budowy i funkcjonowania planowanego rozwiązania.

W zależności od charakteru prowadzonej analizy i jej przedmiotu WebService stosuje różnorodne metody analityczne wypracowane samodzielnie lub we współpracy z partnerami specjalizującymi się w badaniach i analizach rynku. Zawsze analizowane są rozwiązania pokrewne i/lub konkurencyjne w umówionym zakresie zarówno z rynku krajowego jak i zagraniczne.

Oprócz tego typu analizy porównawczej projektowany interfejs graficzny jest poddawany analizie eksperckiej na podstawie której definiowane są wytyczne projektowe rozwiązania.

W ramach analizowanych grup tematycznych wstępnie proponujemy podjęcie następujących zagadnień:

  • definicja grup docelowych użytkowników i ich cech związanych z użytkowaniem Internetu;
  • ewentualne warstwy profilowania i personalizacji informacji w serwisach;
  • spójny język komunikacji interfesju użytkownika;
  • planowany „cykl życia” serwisu oraz świadome planowanie „odświeżania” interfejsów w przyszłości;
  • wygoda obsługi i elastyczność skalowania rozwiązania w przyszłości.

Przez pojęcie makrofunkcjonalności rozumiemy zależności i relacje w strukturze informacyjnej i nawigacyjnej serwisu (jako kompletnego rozwiązania). Na tym etapie najważniejszą rolą jest budowanie struktury informacyjnej oraz zasad poruszania się użytkowników po poszczególnych sekcjach serwisu oraz wzajemne relacje pomiędzy częściami projektowanego rozwiązania. Informacja jest grupowana w oparciu o odszukane relacje, na tyle proste i intuicyjne aby przeciętny użytkownik odnajdywał w sposób naturalny podobne zależności i miał poczucie „wygody” w odnajdowaniu informacji. Na tym etapie również „płaska” wcześniej struktura informacji podlega usystematyzowaniu w takiej hierarchii, aby użytkownik mógł intuicyjnie odnajdywać informacje od ogólnych po szczegółowe.

Określane są charakterystyczne dla projektowanego danego serwisu formy edytorskie a treści informacyjne są przyporządkowywane do poszczególnych form. Tekst, obraz statyczny, informacje tabelaryczne, dokumenty do pobrania, wykresy, animacje liniowe i interaktywne, multimedia – są to niektóre z form edytorskich przypisywanych do poszczególnych treści dla jak najskuteczniejszego przekazania ich użytkownikowi.

Projektanci funkcjonalności biorą na tym etapie pod uwagę wszystkie względy techniczne oraz statystyki dotyczące charakterystyki grupy docelowej i przeciętnego zaplecza technicznego, jakim dana grupa dysponuje.

W ramach działań projektowych na tym etapie poruszanych jest szereg zagadnień zasygnalizowanych w opisie przedmiotu zamówienia, takich jak ergonomia, intuicyjność itp. Jako punkty odniesienia dla projektantów przyjmuje się wnioski z analiz przeprowadzonych wcześniej. Brak takich punktów odniesienia na tym etapie projektowania mógłby skutkować przyjęciem niewłaściwych założeń a co za tym idzie doborem błędnych rozwiązań funkcjonalnych. Stąd etap analityczny jest bardzo istotnym etapem procesu projektowania.

Ważnym elementem makrofunkcjonalności są uzupełniające się sposoby nawigowania po zawartości serwisu (często więcej niż jeden) – tzw. traffic.

Tak jak makrofunkcjonalność skupia się na zależnościach między obszarami informacyjnymi w całym serwisie tak mikrofunkcjonalność skupia się na zależnościach w architekturze informacji poszczególnych stron i „ekranów” charakterystycznych dla danych poziomów serwisu.

Na tym etapie istotną rolę odgrywa również forma graficzna, która projektowana równolegle z mikrofunkcjonalnością daje w rezultacie przemyślany projekt interfejsu graficznego.

Projektanci nadają na tym etapie ostateczny wygląd określonym wcześniej formom edytorskim i scalają je w spójną całość przyjaznego interfejsu graficznego.

Efektem pracy na tym etapie jest zestaw blokowych schematów funkcjonalnych poszczególnych kluczowych stron serwisu – tzw. storyboard’y, które stanowią cenną pomoc podczas podejmowania ostatecznych decyzji dotyczących funkcjonalności oraz są ważną wytyczną podczas projektowania formy graficznej.

Projektowanie formy graficznej rozpoczyna się analizą dotychczasowych rezultatów projektu funkcjonalnego i innych wytycznych, które będą miały wpływ na układ i wygląd szaty graficznej – np. identyfikacji wizualnej marki. Dzięki temu projekt graficzny nie jest już procesem przypadkowym a wszystkie decyzje projektowe zapadają w oparciu o jasne wytyczne i ustalenia wynikające z projektu funkcjonalnego i specyfiki wizualnej marki.

W tym obszarze metodologii projektowania interfejsów WebServcie jest pionierem i posiada przewagę konkurencyjną zbudowaną dzięki unikalnym możliwościom łączenia kompetencji technicznych i projektowych (graficznych i funkcjonalnych) w ramach jednolitego zespołu projektowego.

W ramach projektu szaty graficznej określona zostaje technologia wykonania poszczególnych elementów, paleta barwna, kolory podstawowe i dopełniające, które muszą ze sobą dobrze współgrać w projekcie graficznym. Określane są elementy charakterystyczne interfejsu takie jak typografia, sposób oznaczania tytułów, śródtytułów, przycisków i innych elementów.

Jednym z ważnych elementów projektowanej szaty graficznej jest projektowanie ikon informacyjnych stosowanych w interfejsie graficznym. Na tym etapie oprócz zestawu ikon projektowane są formy graficzne nagłówków lub elementów typowo wizerunkowych o określonym znaczeniu użytych fotografii, haseł lub ilustracji.

Projekt szaty graficznej powstaje w oprogramowaniu graficznym a w jego zakres wchodzą charakterystyczne obszary lub strony poszczególnych serwisów.

Powstanie projektów graficznych interfejsu daje możliwość weryfikacji wyglądu i wstępnej funkcjonalności interfejsu graficznego ale nie daje jeszcze możliwości zbadania jego technicznej budowy i poprawności względem standardów W3C czy SEO oraz wytycznych związanych z przeglądarkami.

Temu właśnie służy etap prototypowania gdy projekt graficzny zostaje zamieniony w realne szablony XHTML dające możliwość oceny poprawności i jakości kodu oraz stosowanych rozwiązań formatowania i optymalizacji interfejsu.

Na etapie prototypowania, powstaje również prototyp testowy serwisu służący do przeprowadzania testów funkcjonalności interfejsu na wybranej próbie użytkowników. Do tego celu zostaje przygotowany prototyp złożony z szablonów HTML w zakresie określonym w zadaniach testowych (czyli czasem różny od podstawowego zestawu szablonów do wdrożenia). Testerzy poruszają po zasymulowanych procesach podając swoje odczucia badającym ich reakcje ankieterom.