1 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne PROJEKTOWANIE STRON INTERNETOWYCH Literatura: Projektowanie stron WWW. Marek Kasperski, Anna Boguska-Torbicz, Wyd. Helion, 2012 Don’t make me think, Steve Krug, Wyd. Pearson New Riders, 2014
2 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne PROCES PROJEKTOWY (wg J.J.Garretta) 1. Wymagania użytkowników zbadanie i zdefiniowanie potrzeb użytkowników strony 2. Strategia strony zdefiniowanie oczekiwań klienta (zarobek, wizerunek?) 3. Strategia technologii określenie, która z dostępnych technologii przyniesie najwięcej korzyści 4. Strategia treści co powinno znaleźć się na stronie, żeby była atrakcyjna 5. Projekt architektury informacji jak pokazać informacje, żeby można je było łatwo znaleźć 6. Opracowanie technologii pisanie kodu 7. Opracowywanie treści 8. Konkretny wygląd grafika, layout, rozplanowanie GUI 9. Kierownictwo projektu dotrzymanie harmonogramu prac, nieprzekroczenie budżetu
3 PROJEKTOWANIE STRON INTERNETOWYCHPROTOTYPOWANIE (koncepcja i wizualizacja) ZALETY: oszczędność czasu i pieniędzy jasność celów sposób na wykrycie błędów RODZAJE: makiety/mockups (szkice stron i interfejsów, Microsoft Visio, Axure) prototypy funkcjonalne (prototypowanie za pomocą kodowania) diagramy przepływu (ścieżki przejść, ilustracja przepływu informacji)
4 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne PROTOTYPOWANIE Sortowanie kart to technika badawcza pozwalająca opisać, w jaki sposób użytkownicy kategoryzują informacje pokazywane na stronie internetowej lub w aplikacji. Badanym osobom przedstawia się różne informacje - na przykład elementy nawigacji, tytuły podstron, tematy, produkty, opisy itp. -, a następnie prosi się je o pogrupowanie tych danych w struktury. Zadaniem badaczy jest w tych strukturach doszukać się pewnych schematów, powtarzających się wzorów. Co to daje? Wiedza uzyskana w ten sposób pozwala na dostosowanie układu podstron i etykiet menu do oczekiwania grupy docelowej. najlepiej pracować z ok.15 osób, przygotować ok.. 50 kart, im więcej tym trudniej przeanalizować dane można przeprowadzać zdalne badania card sorting przy pomocy programów z usługą online typu: OtimalSort, xSort 7±2 – pojemność pamięci krótkoterminowej, dlatego należy grupować przedstawiane elementy 7unyh
5 PROJEKTOWANIE STRON INTERNETOWYCHPROTOTYPOWANIE Prototyp powinien zawierać następujące elementy: architektura informacji - rozmieszczenie elementów lista funkcjonalności – opcje i możliwości serwisu opisy zasad funkcjonowania – np. sposób pobierania i wyświetlania informacji na stronie wstępnie zdefiniowana terminologia – co i jak się będzie nazywało zawartość serwisu cel – na podstawie prototypu powinniśmy wiedzieć do czego serwis służy Denim – program pozwala na połączenie papierowego prototypowania i elektronicznie powstających mockupów Prototypowanie komputerowe PowerPoint Ms Visio Axure
6 PROJEKTOWANIE STRON INTERNETOWYCHPERSONY Każda strona powinna mieć okręśloną grupę docelową użytkowników i pod ich kątem powinna być optymalizowana. Persona jest archetypem użytkownika strony i tworzy się ją na początku procesu projektowego. Najlepiej stworzyć kilka person, pamiętając o tym by nie kierować się własnymi odczuciami, lecz przyjmując punkt widzenia persony i jej oczami oceniać projekt. Źródła informacji o użytkownikach: pogłębione wywiady indywidualne wywiady fokusowe systemy zbierania statystyk odwiedzin strony www Charakterystyka persony: zdjęcie (by nie myśleć o personach jak o sztucznych tworach) imię i nazwisko dane demograficzne cechy charakteru sytuacja życiowa i status materialny opis środowiska motywacja do korzystania ze strony cele, które persona chce osiągnąć wzorce zachowań związane ze stroną
7 PROJEKTOWANIE STRON INTERNETOWYCHStruktura hierarchiczna Struktura liniowa Struktura liniowa z alternatywą Struktura liniowo-hierarchiczna Struktura pajęczyny Co wpływa na wybór określonej struktury? jaka treść? jaki cel? główne tematy plan strony sposób wykonania
8 PROJEKTOWANIE STRON INTERNETOWYCHMENU GŁÓWNE zakładki (liczba kategorii nie powinna przekraczać 10) – 43% stron ma menu w formie zakładek menu kaskadowe (kłopoty z obsługą)
9 PROJEKTOWANIE STRON INTERNETOWYCHMENU GŁÓWNE chmura tagów (słowa kluczowe, słowa najczęściej wyszukiwane) breadcrumbs/okruszki chleba (str. gł./strona sekcji/strona podsekcji – poziomy pasek „ścieżka”) - 45%
10 PROJEKTOWANIE STRON INTERNETOWYCHLOGO - linkowanie logo ze stroną główną - najczęściej górna, lewa strona
11 PROJEKTOWANIE STRON INTERNETOWYCHLOGOWANIE system rejestracji odzyskiwanie i zapamiętywanie hasła boks link w prawym górnym rogu 74%
12 PROJEKTOWANIE STRON INTERNETOWYCH ELEMENTY GUI - ciekawostkiPrzykładowe kreatory online progress indicator przyciski kursory
13 PROJEKTOWANIE STRON INTERNETOWYCHTESTOWANIE STRONY head odnośniki grafika zgodność z przeglądarkami rozdzielczość i kolory czas ładowania walidacja strony * poprawny kod zwiększa prawdopodobieństwo, że strona będzie się dobrze wyświetlać pod większością przeglądarek. * strona nie zawierająca błędów ładuje się znacznie szybciej * aktualizacja poprawnego kodu jest łatwiejsza * zdobywamy dodatkową wiedzę o języku HTML Programy do walidacji i nie tylko: https://validator.w3.org/
14 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne BADANIA JAKOŚCIOWE Fokusowe wywiady grupowe oraz pogłębione wywiady indywidualne służą do odczytania opinii, sądów, motywów zachowań i emocji przyszłych użytkowników witryny. Badania te ułatwiają generowanie idei związanych z rozwojem witryny, pozwalają poznać konkurencję, oraz dają możliwość wstępnej oceny projektu i zdiagnozowania potencjalnych problemów. Badania jakościowe warto przeprowadzić, gdy: - wprowadzony jest nowy rodzaj strony (dostosowanie do oczekiwań) wprowadzana jest strona, której podobne wersje już funkcjonują (ocena konkurencji) redesign (poznanie opinii i odczuć wobec zmian) chcemy poznać opinie docelowych użytkowników na temat wyglądu i słownictwa strony (miejsce przeprowadzania wywiadu, rola moderatora, analiza danych, wywiady indywidualne, badania jakościowe online)
15 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne TESTY FUNKCJONALNOŚCI Testy te pozwalają zidentyfikować obszary strony, w których użytkownicy mają trudności. Zjawiska wykazywane w czasie testowania prototypu strony z dużym prawdopodobieństwem wystąpiłyby podczas rzeczywistego funkcjonowania strony. Testy mogą być przeprowadzane we wstępnej fazie projektu, jak i za każdym razem, gry wprowadzone zostaną zmiany. (rola moderatora, uczestnicy (5 uczestników, 85% informacji), środowisko, sprzęt do testów, nagrywanie testów, plan badania, rozmowa potestowa, raport z badania (wyniki, wskazówki), dyskusja wyników) TESTY FUNKCJONALNOŚCI ONLINE Morae oprogramowanie firmy TechSmith umożliwia: nagrywanie sesji z drugą osobą pracującą na zdalnym komputerze, podgląd na żywo co wykonuje osoba testująca, zebranie dokumentacji)
16 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne CLICKTRACKING Metoda pozwalająca na śledzenie aktywności użytkowników na stronach www. Clicktracking wykorzystuje system wizualizacji aktywności na danej stronie internetowej, by śledzić kliknięcia użytkowników co do piksela. (Generalnie narzędzia do clicktrackingu wykorzystują informacje na temat: - rozdzielczość, dla której dana strona została przygotowana, - wielkość okna przeglądarki internetowej osoby odwiedzającej stronę, - punkt na ekranie, w którym nastąpiło kliknięcie myszy) Heat map – mapa najbardziej gorących miejsc na stronie.
17 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne TESTY A/B Testy A/B opierają się na możliwości sprawdzenia dwu lub więcej różnych wersji tego samego produktu. Za ich pomocą można przetestować: banery reklamowe elementy graficzne układ strony rozmieszczenie elementów kluczowych BADANIA Z ANALIZĄ STATYSTYK System operacyjny, przeglądarki, rozdzielczość, głębia kolorów, flash player Windows 7, Android Firefox, Chrome 1366x true color % Dane statystyczne:
18 PROJEKTOWANIE STRON INTERNETOWYCHTechnologie Informacyjne EYETRACKING Badania te zwane również okulografią, polegają na śledzeniu ruchu gałek ocznych użytkownika. Wnioski z badania użyteczności: Użytkownicy witryn internetowych bardzo szybko przeglądali strony internetowe Użytkownicy witryn internetowych badali strony internetowe zgodnie z kształtem litery F (najwięcej informacji jest przyswajanych z pierwszych linijek -począwszy od lewej krawędzi ekranu) Badani byli niezwykle skuteczni w selektywnym wybieraniu informacji (jak wynika z oględzin ich gałek ocznych ich wzrok skupiał się tylko na najistotniejszych elementach) Obrazki umieszczane w środku tekstu były często traktowane jako przeszkody i omijane Grafiki rozmyte, niewielkie, nieczytelne były automatycznie pomijane. Dużo większą uwagę badanych zwracały obrazki zawierające jakieś informacje, niż te, które miały jedynie walory estetyczne. Badani często patrzyli na fotografie, na których fotografowany patrzył prostu w obiektyw Animacje przyciągały uwagę tylko w sytuacjach, kiedy były nieskomplikowane oraz miały związek z tekstem. Witryny zaprojektowane w prosty sposób, zawierające mało elementów powodują, że użytkownik bardziej skupia się na treści przekazu. Reklamy banerowe były omijane wzrokiem przez przytłaczającą większość użytkowników. Grupą która nie była “ślepa” na banery (banner blindness) były dzieci do siódmego roku życia, które klikają na elementy wyróżniające się ilością kolorów i animacjami
19 PROJEKTOWANIE STRON INTERNETOWYCHPRZYDATNE PROGRAMY DO TWORZENIA I TESTOWANIA GRAFIKI Fujitsu Color Doctor, Accessibility Color Wheel, Visual Impairment Simulator – pozwalają na badania strony po względem dostępności dla osób z wadami wzroku Adobe Kuler, Color Palette Generator, Color Fields Color Pickr Istnieje kilka podstawowych zasad tworzenia zestawów kolorystycznych. W wyniku ich zastosowania otrzymujemy tzw. schematy kolorów harmonijnych: - monochromatyczne, pastelowe, kontrastowe Do tworzenia zestawów harmonijnych wykorzystuje się zasady: komplementarności (dwa kolory leżące naprzeciw siebie w kole barw) triady (trzy kolory leżące na kole barw tworząc trójkąt) cztery dowolne kolory tworzące czworokąt na kole barw