ĆWICZENIA
Architektura informacji i systemy które się na nią składają (umieć rozróżnić różne typy systemu organizacyjnych, nawigacyjnych, przykłady, cechy, itd.)
Architektura informacji:
Musimy wiedzieć do czego serwis będzie służył
Dla kogo i po co potrzebny jest ten serwis
Jaki problem informacyjny może mieć użytkownik i jak nasz serwis może mu pomóc
Musi być hierarchia trudności informacji w serwisie
Serwis musi być powiązany ze światem
Projektowanie architektury informacji = zaprojektowanie minimum trzech systemów:
- system nawigacyjny - przemieszczanie się między inf. (podzielonymi) wewnątrz serwisu
-system organizacyjny - podział informacji na mniejsze porcje, kategoryzacja, wg jakiś kryteriów.
-system etykietowania - nadawanie nazw porcjom informacji (mogą mieć różny charakter, słowny, obrazkowy))
-system wyszukiwania
System nawigacji: nawigacja wbudowana -> jest nierozłączną częścią serwisu; stanowi jego szkielet: globalna (przemieszczanie między głównymi działami serwisu <jak autostrady> od razu widać zakres serwisu); lokalna (przemieszczanie w obrębie jednego działu, poddziału <jak drogi lokalne>); kontekstowa (wynalazek hipertekstu, nie ma odpowiednika w świecie realnym; bezpośrednie połączenie elementów związanych ze sobą kontekstowo, ale odległych w strukturze serwisu <w innych działach>; tworzenie relacji sieciowych z innymi serwisami i ich zasobami, związanymi kontekstowo <tak działa np. Ceneo>); nawigacja wspomagająca -> nie musi wystąpić; budowana gdy nawigacja wbudowana nie wystarcza
Nawigacja wspomagająca: musi być kompletna! Narzędzia wspomagające:
mapa serwisu:
- oddaje strukturę, pokazuje zależności hierarchiczne serwisu
- może nie obejmować najważniejszych poddziałów, w których mamy do czynienia z samą informacją
- powinna być aktywna - jednym kliknięciem można się gdzieś dostać
- pomaga wypozycjonować serwis w wyszukiwarce
Kiedy stosować: gdy ze względów estetycznych lub skalę zasobów strukturalna stronie głównej nie jest czytelna
Indeksy (spisy, wykazy, listy)
- autorskie, spisy nazw
- hasło powinno być aktywne - przenosić nas do miejsca w dokumencie
Kiedy stosować: gdy w serwisie mamy do czynienia z dużą liczbą informacji jednostkowych
Szybkie linki
- szybkie przejścia do najczęściej wykorzystywanych zasobów
- powinny być wybierane na podstawie statystyk
- łamią strukturę serwisu - powinny być wyróżnione od nawigacji globalnej i lokalnej
- może to być wyszukiwarka katalogu umieszczona na stronie głównej
Poradnik nawigacji
Systemy Organizacyjne (klasyfikacji, kategoryzacji):
Jednoznaczne (dokładne):
- jedna konkretna porcja informacji może być przyporządkowana tylko do jednej konkretnej kategorii
- dzielimy na kategorie wg określonych kryteriów
- musimy się zdecydować w jakie grupy będziemy je łączyć i gdzie przyporządkować
- np. katalog alfabetyczny (Kowalski tylko do K.)
- użytkownik będzie szukać dokładnie tam, gdzie twórca to umieścił
Rodzaje:
Alfabetyczny, chronologiczny (gdy granice między okresami są wyznaczone w sposób ostry <daty, wieki - TAK; pojęcia, np. średniowiecze - NIE>), geograficzny (gdy granice są wyznaczone w sposób ostry <Warszawa - TAK; Mazowsze - NIE>)
Niejednoznaczne
Rodzaje: tematyczny (o czym jest), zadaniowy (do czego służy), audytoryjny (dla kogo jest)
Mogą być dwa systemy organizacyjne w jednym serwisie, ale powinien być jeden. Musi być wszystko uporządkowane bo człowiek lubi porządek i jak jest więcej systemów, to robi się szum informacyjny.
Systemy etykietowania:
- system nazw wykorzystywanych w serwisie
- linki nawigacyjne
- tytuł działów, poddziałów, poszczególnych stron
- powtarzające się nazwy własne, np. nazwa instytucji, firmy
Do wyboru: etykiety graficzne lub tekstowe.
Zasady w projektowaniu: konsekwencja; standaryzacja w zakresie poszczególnych grup etykiet (powinny być standardowe, na jednym poziomie takie same).
Etykiety tekstowe:
Projektowanie wyglądu: krój, wielkość, kolor czcionki, kolor tła, ewentualnie kształt pola, w którym etykieta jest pisana
Polskie znaki kodowane wg dwóch standardów: ISO - 8859 - 2 - środkowe - europejskie ISO; Windows - 1250 - środkowo - europejski Windows
Można wybrać tylko jeden, bo inaczej będą krzaczki.
Kodowanie formatu - jeśli nie ma danej czcionki, to albo wyświetli się domyślna albo nic. Dziwne czcionki trzeba przesyłać jako obrazki, wtedy na pewno będą dobrze wyświetlone.
Etykiety to mają być małe JPG. Tekst zawsze przesyłamy w trybie tekstowym, bo mniej waży. Wielkość czcionki powinna współgrać ze znaczeniem
Kapitaliki - czcionki dużych liter alfabetu o wysokości oczka małych liter alfabetu tego samego stopnia, nie posiadające ani dolnych ani górnych wydłużeń
Wersaliki (majuskuły) - duże litery w druku, z których składa się całe słowo lub wiersz
Kolor czcionki: mocno nasycony kolor jest ważniejszy od koloru pastelowego
Kolor i kształt tła: musi grać z kolorem całej strony, nie może się gryźć; prostokąt jest kształtem najbardziej ekonomicznym
Ustalenie jednej formy gramatycznej etykiety: np. nazwy działów głównych to rzeczowniki w Mianowniku
Etykiety Graficzne:
- wyszukiwarki nie indeksują obrazków tylko słowa, a etykiety są ważną informacją
- software' y do odczytu strony dla osób niewidzących nie odczytują obrazka (więc dodatkowe opisy słowne powinno się robić - dymki)
Dzielimy ikony na trzy rodzaje:
ikony dosłowne - najbardziej jednoznaczne, przedstawiają obraz tego, co przedstawiają;
- co się zdarzy, co tam jest; nie ma ich za wiele w sieci
- jednoznaczne interpretacje - zaleta
- niska przydatność - wada (niewiele rzeczy da się tak dosłownie narysować)
- np. ikonka drukarki
ikony symboliczne - symbolizują to, do czego odsyłają, co nazywają
- obiekt posiada pewne cechy, np. ikona lupy symbolizuje powiększenie
- zaleta - większy wybór niż dosłownych
- w jakiś sposób kojarzą się z tym do czego odsyłają
- wada - możliwość odmiennej interpretacji
ikony arbitralne - swobodne projektowanie, bez związku z treścią, do której odsyłają
- zaleta - wygląd graficzny, estetyczny
- wada - mogą być różnie interpretowane
- dla zaufanych, stałych klientów w projektowaniu logo, znaków firmowych są dobre
NIE WOLNO NADUŻYWAĆ ETYKIET GRAFICZNYCH !!
Zasady projektowania wynikające z zasad działania naszej pamięci krótkotrwałej i długotrwałej
Pamięć :
- fizjologiczna (sensoryczna) - pamięć w naszych zmysłach
- krótkotrwała - trwa krótko, jest ulotna, łatwo rozpraszana, mało pojemna (mieści od 5-8 obiektów); nie rozpraszać (np. nagłe pojawienie się ostrych plam barwnych, ruch, nagły dźwięk); niedużo elementów, wyraźnie zróżnicowanych (6,7 głównych działów) -wtedy użytkownik może ogarnąć wszystko pamięcią krótkotrwałą
- długotrwała - trwa długo, jeżeli dana rzecz jest utrwalana (zazwyczaj), z przeniesieniem do długotrwałej związany jest pewien wysiłek (uczenie się);
-łatwiej zapamiętuje się informacje, które mają jakąś strukturę, które można łatwo do własnej struktury wiedzy
-trzeba ją odświeżać
-ograniczać konieczność przenoszenia do długotrwałej- dążymy do tego, żeby klient musiał się nauczyć na pamięć jak najmniejszej ilości elementów serwisu
-konsekwencja i standaryzacja - im więcej standardów, powtarzalności - użytkownik musi nauczyć się wszystkiego tylko raz
Jeśli użytkownik musi zapamiętać dużą rzecz musi być ona logicznie związana z innymi elementami: wyrazistość związków logicznych, wyrazistość struktur
Systemy jednolitej identyfikacji wizualnej (jak się je buduje, jakie narzędzia, sens systemu itd.)
Cele:
- zwrócenie uwagi klienta
- odróżnienie od konkurencji
- nadanie cech indywidualnych
- budowanie pozytywnego wizerunku
- nakłonienie do zakupu
Czym jest:
System - spójna całość
Jednolitej - konsekwencja
Identyfikacji - wyróżnienie
Wizualnej - oddziałujemy graficznie
Skład systemu:
znak graficzny firmy (logo)
kolory firmowe
typografia firmowa (czcionka)
- widoczny na wszystkich materiałach promocyjnych firmy i z nią związanymi
- kiedy projektujemy dla firmy, która ma już taki system musimy go użyć
- kiedy firma jeszcze go nie ma, to też projektujemy. Musimy brać pod uwagę, że to, co wymyślimy musi dobrze wyglądać w serwisie, ale i na wizytówce i na ścianie budynku i na firmowym długopisie.
Znak graficzny:
logo - symbol czysto graficzny
logotyp - słowo, teks, skrót w oryginalnej kombinacji graficznej
Projekt:
logo dosłowne - wydaje się najlepszym rozwiązaniem, ale większość jest pozajmowana lub nie da się czegoś dosłownie wyrazić
logo symboliczne - powinno kojarzyć się pozytywnie
logo arbitralne - oderwanie się od skojarzeń
logo abstrakcyjne - można wymyślić co się chce, ale trzeba je wypromować
Kolory firmowe:
- trudne kolory (skontrastowane, ostre), nie mogą być dużymi plamami, tłem
Typografia:
- komputer nie odtworzy wymyślnych czcionek (wysyłać je jako grafikę)
Jak taki system zrobić?
Wzorce:
- konkretne pliki z logo/ logotypem w różnych wersjach
- wzorniki kolorów i czcionek
Dokumentacja:
-co kto projektuje
Założenia systemu:
- podajemy, co obowiązuje
-nie trzeba podawać, co jest niedozwolone
- na bazie jednego systemu można stosować równe wariacje w stopniu nie szkodzącym jednolitości
Celowość, zasoby, podstawowe zasady stosowania i pozycjonowania już wykonanego systemu w wyszukiwarkach internetowych
Pozycjonowanie serwisów w sieci - proces, który ma zagwarantować odpowiednie miejsce SI w zbiorze wyników konkretnej wyszukiwarki, po użyciu przez wyszukującego określonych słów, fraz
Dwie drogi:
- robimy to sami - kosztuje nas to trochę czasu i wiedzy
- zlecamy - musimy umieć wynegocjować właściwe warunki i dokładnie wiedzieć czego chcemy
Musimy znać:
- czynniki wpływające na pozycję - jeśli chcemy sami- należy monitorować (Page Rank Google))
- jakich słów używają wyszukujący, na których nam zależy
- z jakich wyszukiwarek korzystają - w każdej trzeba wykonać osobne pozycjonowanie
- rozpoznanie poziomu konkurencyjności - na jakim przedziale miejsc nam zależy
Plan działania - etapy:
Badamy grupę docelową -
- jakie wyszukiwarki będą używane- definiujemy
Musimy wybrać słowa, jakich będą używać nasi użytkownicy
- na podstawie badań grupy reprezentatywnej;
- kiedy użytkownicy wpisują słowa i wchodzą do serwisu - pokazuje tylko, jakich słów użyli ci, którzy nas znaleźli a nie wiem czego użyli ci, którzy nie znaleźli lub weszli do konkurencji
Zhierarchizowane listy słów -
- zwykle dotyczy kilku słów (powyżej 10), dbamy o to, aby strona była wysoko kiedy klient użyje tych słów;
- hierarchia częstotliwości
- synonim dla wyszukiwarki to inne słowo, trzeba je też pozycjonować
FIRMA:
Negocjujemy:
- cenę usługi - zależy od liczby wyszukiwarek; liczby słów- powyżej 30 to tzw. Long tail; przedziału miejsc; czasu, pozycjonowanie - okres umowy; czasu reakcji)
- okres umowy - obszar niekonkurencyjny - krótko; obszar konkurencyjny - proces permanentny
- czas reakcji - kiedy wypadamy z przedziału, jak szybko firma ma nas do niego z powrotem przywrócić
SAMODZIELNIE:
- optymalizacja kodu (jeśli będą błędy strona będzie źle indeksowana przez wyszukiwarkę)
- strona ma być wykonana w formie indeksowanej przez wyszukiwarkę (tryb tekstowy - np. Google nie indeksuje Flash'a)
- należy dążyć do wyczyszczenia kodu - rozdzielenie formy i treści
- formę dajemy w pliku CSS i łączymy to z plikiem z treścią i pozycjonujemy tylko ten drugi
- walidacja kodu - sprawdzenie poprawności
- tytuły działów powinny być w formie tekstowej aby mogły być zaindeksowane, nagłówki, mapa strony tak samo
- dbałość o pola nagłówkowe - head, keywords - sprawdzanie ich w innych miejscach strony
- dobry adres - prosty, intuicyjny
- jeżeli wyszukiwarka bierze pod uwagę też inne czynniki, to też musimy brać je pod uwagę, musimy pamiętać o linkach do naszej strony - kampania reklamowa
- zgłaszamy stronę do przeindeksowania
- analizujemy co nam pomogło a co zaszkodziło
Dobra znajomość 9 zasad projektowania serwisów WWW
PRZEJRZYSTOŚĆ
- wiem gdzie jestem, gdzie mogę się udać i wiem, co robi system
- wyraźnie wypunktowane, wydzielone struktury nawigacyjne (zaznaczenie gdzie aktualnie się znajduję, dostępne z każdego miejsca)
- nie może być sprzecznych bodźców (np. dwa elementy podświetlone, jeden- ważny, drugi -bo tu jestem)
- ścieżki dostępu (jak po kolei szliśmy przez serwis)
- w trakcie dłuższych elementów użytkownik musi wiedzieć w której części się znajduje i jak stąd wyjść (np. linki powtórzone co jakiś czas)
- reakcja systemu powinna być oczywista (np. mówić, że operacja jest w toku)
KOMUNIKATYWNOŚĆ
- rozumiem, co system do mnie mówi
- język - zrozumiały dla grupy docelowej (narodowy, alternatywny <niezależne, mniejsze, ale spójne systemy>, fachowy <język grupy>, żargon <unikać, jeśli nie kierujemy serwisu do grupy zawodowej>)
- poprawność językowa
- standardowe nazwy własne (to samo brzmienie na każdej stronie)
- poprawność kodowania polskich znaków
- ASCI - podstawowa tablica kodowania (anglo- saska) - tylko standardowe znaki
SPÓJNOŚĆ I KONSEKWENCJA
- system nie zaskakuje
- układ i treść są standardowe, konsekwentne w całym serwisie
- znormalizowana technologia
- jednolity układ stron, jednolite formatowanie (te same czcionki, oznaczenia linków, koncepcja kolorystyczna i graficzna)
- jednolite rozmieszczenie przycisków nawigacyjnych
- spójna struktura informacji bez „ciał obcych” (bo inaczej klient traci wyobrażenie struktury)
PREWENCYJNOŚĆ
- trudno zrobić błąd, ale łatwo go naprawić
- unikanie błędów, ale i ich przełamanie, naprawianie
- powinno być jasno wyjaśnione jak ten błąd naprawić
- zaprojektowanie, w którym użytkownik widzi tylko te opcje, komunikaty, które w danym momencie mają sens
- zbędne rzeczy (linki, itp.) usuwać z pola widzenia klienta
- właściwe rozłożenie bodźców graficznych na stronie
- klient ma wiedzieć co się stanie zanim kliknie
- unikamy niejednoznaczności i nieprecyzyjności komunikatów
- informujemy o schemacie wprowadzenia informacji
- prosto, jednoznacznie informujemy o sposobie usuwania
ADEKWATNOŚĆ NARZĘDZI NAWIGACYJNYCH
- wszystkie narzędzia nawigacyjne powinny odpowiadać wielkości i specyfice naszego serwisu
- dobra nawigacja kontekstowa
- dobre wykazy, spisy, indeksy
- sensowne, dobre tytuły do opcji ulubione
SEKWENCYJNOŚĆ
- właściwe porcje we właściwej kolejności
- krótkie dokumenty, ale powiązane właściwie z innymi dokumentami
- powinna być też możliwość niesekwencyjnych skoków
ELASTYCZNOŚĆ
- serwis dostosowuje się do różnych potrzeb
- łatwa droga i dawanie wersji alternatywnych (wersja tekstowa, mobilna)
- wielkość czcionki (duża czcionka)
- języki
- alternatywne, estetyczne (tzw. skórki) -> w serwisach informacyjnych NIE!
- wersja do wydruku
- trudna droga: profilowanie (po zalogowaniu klient ma swoją wersję serwisu) -> gdy mamy stałego klienta
AKTUALNOŚĆ
- aby klient mógł rozpoznać czy elementy są aktualne, czy serwis żyje
- data bezpośrednio przy każdej informacji
- wszystkie linki muszą działać (sprawdzać i aktualizować)
- unikanie zdezaktualizowanych informacji (projektujemy archiwum dla serwisu)
NADRZĘDNA ZASADA: SPRAWNOŚĆ!
- maksymalny zysk przy minimalnym nakładzie pracy
- klient zawsze musi włożyć jakąś energię by uzyskać efekt
- krótkie ścieżki dostępu
- szybkie linki
- wszystko, co się da na poziomie wartości domyślnych
- nie wymuszać zbędnych działań
JEŚLI 8 ZASAD DZIAŁA, TO SYSTEM SPEŁNI TEŻ TĄ 9-TĄ!
Pamiętać co to jest funkcjonalność, użyteczność