Materiały szkoleniowe. Warszawa, grudnia 2012 r.

Transkrypt

1 Materiały szkoleniowe Z ZAKRESU UŻYTECZNOŚCI SERWISÓW INTERNETOWYCH Warszawa, grudnia 2012 r.

2 Spis treści BLOK 1. WPROWADZENIE DO UŻYTECZNOŚCI Omówienie podstawowych pojęć używanych podczas szkolenia HCI - Human Computer Interaction Modele mentalne Model UCD - User Centered Design BLOK 2. DEFINIOWANIE I ANALIZA WYMAGAŃ UŻYTKOWNIKÓW Analiza celów biznesowych Wywiady pogłębione Persony Warsztat - Persony OMÓWIENIE POJĘĆ SPECJALISTYCZNYCH SECTION elektronika i technologia informacyjna ELMER 2 / ELMER formularze internetowe PAS 78 Guide to good practice in commissioning accessible websites BS strony, serwisy, aplikacje internetowe Normy ISO związane z użytecznością Omówienie normy WCAG w kontekście projektów internetowych Uwzględnienie standardów, norm i przepisów prawa w procesie projektowania BLOK 3. ARCHITEKTURA INFORMACJI WPROWADZENIE DO ARCHITEKTURY INFORMACJI Perspektywa i definicja Grupowanie danych Nazewnictwo i etykiety Nawigacja Wyszukiwanie Metadane Odnajdywalność (findability) Współczynnik zagubienia Prawo trzech kliknięć - prawda czy mit? WARSZTATY CARDSORTING I NAVIGATION STRESS TEST Cardsorting Navigation stress test BLOK 4. PROJEKTOWANIE ROZWIĄZAŃ WEBOWYCH I MOBILNYCH PARTICIPATORY DESIGN Cardsorting 1994 Jakob Nielsen Prototypowanie na papierze Strona 2 z 73

3 Prototypowanie komputerowe WARSZTAT PROJEKTOWANIE, SZKICOWANIE WZORCE PROJEKTOWE Gridy Nawigacja Menu horyzontalne Breadcrumb menu menu okruszkowe Paginacja Przewijanie z doczytywaniem Wizard (kreator) Captcha Stopka FORMULARZE TECHNOLOGIE RESPONSIVE DESIGN (LIQUID) ISTOTNE OGRANICZENIA BLOK 5. TECHNIKI I METODY BADANIA UŻYTECZNOŚCI Istota badań w projekcie Analiza heurystyczna Warsztat Listy kontrolne Badania użyteczności vs User Acceptance Testing Laboratoryjne badania użyteczności z użytkownikami Zdalne badania użyteczności Badania użyteczności zdalne a badania laboratoryjne Wizard of Oz Inne metody badawcze Strona 3 z 73

4 Blok 1. Wprowadzenie do użyteczności 1. Omówienie podstawowych pojęć używanych podczas szkolenia Słowa kluczowe: użyteczność, ergonomia, interakcja, dostępność, HCI, UCD, WCAG, WAI, architektura informacji, prototypy, prototypy hi-fi, prototypy low-fi, wireframes, user experience, service design. Lista pojęć i definicji wykorzystywanych w trakcie szkolenia: Projektowanie interakcji (interaction design, IxD) - zajmuje się teorią, badaniami oraz praktyką projektowania interaktywnych produktów, wspierających komunikowanie się i oddziaływanie na siebie ludzi w codziennych relacjach. Bill Moggridge, Designinng Interaction Ergonomia - dziedzina nauki zajmująca się dostosowaniem otoczenia człowieka, w szczególności otoczenia pracy, do wymagań i ograniczeń ludzkiego organizmu, fizycznych, psychofizjologicznych oraz poznawczych. Interakcja człowiek-komputer (Human-Computer Interaction, HCI) - jest dziedziną nauki zajmującą się badaniem relacji między człowiekiem a komputerem; koncentruje się na badaniach projektowania, ewaluacji i wdrażania interaktywnych systemów komputerowych używanych przez człowieka oraz wszystkich aspektów relacji między systemem a człowiekiem. Użyteczność jest miarą wydajności, efektywności i satysfakcji, z jaką użytkownicy realizują określone cele w systemie w zdefiniowanymi kontekście. Użyteczność określa się głównie poprzez: Strona 4 z 73

5 efektywność wykonywania zadań przez użytkownika, liczbę popełnianych błędów, łatwość nauczenia się obsługi systemu, łatwość zapamiętania jego obsługi, satysfakcję z użytkowania. Projektowanie zorientowane na użytkownika (User-Centered Design, UCD) - metodyka projektowania interakcji, która koncentruje się na potrzebach i wymaganiach końcowego użytkownika. Metodyka UCD w całym procesie projektowania angażuje techniki i metody uwzględniające użytkownika. Projektowanie doświadczenia użytkownika (User Experience, UX) - projektowanie wszystkich aspektów relacji użytkownika z interaktywnym produktem, ze szczególnym uwzględnieniem elementów wywołujących reakcje emocjonalne i kształtujących pozytywne doświadczenia. Morville proponuje sześć wymiarów UX: znajdywalność, wiarygodność, dostępność, użyteczność, funkcjonalność, wzbudzanie pożądania. Strona 5 z 73

6 Projektowanie usług (Service Design) - kształtowanie wszystkich aspektów kontaktu (tzw. touchpoint) klienta z marką, produktem, usługą lub firmą. Dostępność - dziedzina wiedzy z zakresu interakcji człowieka z komputerem zajmująca się problematyką tworzenia stron i serwisów internetowych dostępnych dla jak najszerszego grona odbiorców, ze szczególnym uwzględnieniem osób niepełnosprawnych. Dostępność serwisu internetowego oznacza stopień, w jakim może być on postrzegany, rozumiany i przeglądany przez wszystkich użytkowników, niezależnie od ich cech lub upośledzeń, a także niezależnie od właściwości używanego przez nich oprogramowania i sprzętu. WCAG - Web Content Accessibility Guidelines - rekomendacje dotyczące dostępności stron internetowych przygotowane przez WAI. Strona 6 z 73

7 WAI - Web Accessibility Initiative - inicjatywa W3C (World Wide Web Consortium - od 1994 roku instytucji) mająca na celu zwiększenie szeroko rozumianej dostępności stron WWW. Architektura informacji - jest dziedziną wiedzy, która zajmuje się sposobami gromadzenia, organizacji i prezentacji informacji tak, by dotarcie do nich i ich wykorzystywanie było możliwie najłatwiejsze. Prototypy - funkcjonalne makiety symulujące działanie serwisów internetowych, zazwyczaj zawierające większość interakcji, które zostaną potem wdrożone jako serwis WWW. Prototyp nie symuluje jednak bardziej zaawansowanych funkcji związanych np. z operacjami na bazie danych. Pokazuje raczej wybrane, najważniejsze funkcje serwisu dla przykładowych danych. Wireframes (makiety) - statyczne (nieklikalne) schematy poszczególnych stron serwisu, zazwyczaj w odcieniach szarości (low fidelity) lub kolorowe symulujące ostateczny wygląd witryny (high fidelity). 2. HCI - Human Computer Interaction Słowa kluczowe: charakterystyki użytkowników, popełnianie błędów, rozwiązywanie problemów, odczucia, umiejętność nauki, niepewność. Psychologiczne aspekty interakcji z komputerem - charakterystyki poznawcze użytkowników. Strona 7 z 73

8 Pamięć Podstawowe efekty poznawcze dotyczące pamięci mają zastosowanie i wpływa na projektowanie systemów komputerowych: efekt świeżości, efekt pierwszeństwa, porcjowanie, tzw. chunking, kategoryzowanie, liczba Millera 7+/-2: liczba elementów przechowywanych w pamięci krótkotrwałej. Rola liczby Millera w projektowaniu nawigacji. Wskazane jest tworzenie interfejsów w sposób znaczący i pokategoryzowany, np. Shneiderman sugeruje: nazwy komend znaczące i wyróżniające się, grupowanie komend, konsekwentne stosowanie skrótów, możliwość tworzenia skrótów dla zaawansowanych użytkowników, ograniczenie liczby sposobów realizacji zadań. Percepcja i uwaga: - postrzeganie kontrastu, - postrzeganie koloru, - prawa Gestalt: zasada kontrastu, zasada grupowania, zasada bliskości, zasada ilości, - selektywność uwagi (cognitive overload). Strona 8 z 73

9 Zdolności motoryczne i wybór Prawo Fittsa - czas potrzeby do przesunięcia się w kierunku celu na ekranie jest funkcją rozmiaru celu i dystansu do jego osiągnięcia. Prawo Hicksa czas podjęcia decyzji rośnie linearnie do ilości informacji. Nabywanie umiejętności Interakcja z komputerem różni się w zależności od poziomu zaawansowania użytkownika. W zależności od poziomu zaawansowania użytkownicy potrzebują różnego rodzaju wsparcia i możliwości oferowanych przez system. Model użytkownika z perspektywy projektanta - GOMS: - cele, - operacje (elementarna, percepcyjna, motoryczna, poznawcza), - metody sekwencja operacji, - zasady wyboru między metodami w celu osiągnięcia selection rules. Najczęściej stosowany model to KLM (Keystroke Level Models), który pozwala ocenić czas potrzebny do wykonania poszczególnych operacji, w szczególności przydatny do porównania alternatywnych projektów zaawansowanych systemów eksperckich. 3. Modele mentalne Model mentalny to model funkcjonowania systemu tworzony przez użytkownika w trakcie interakcji z nim. Modele mentalne wynikają z metafor i analogii, którymi posługują się użytkownicy w próbie zrozumienia systemu. Modele mentalne projektantów są bardzo często różne od modeli użytkowników. Strona 9 z 73

10 4. Model UCD - User Centered Design Omówienie modelu UCD/HCD Metodyka projektowania systemów interaktywnych skoncentrowana na potrzebach i wymaganiach użytkownika. Użytkownicy i ich potrzeby kształtują cały proces projektowania systemu. Projektant systemu ma za zadanie przełożenie celów i potrzeb użytkownika na zadania, które użytkownik będzie mógł zrealizować w systemie. UCD charakteryzuje się: 1. zaangażowaniem użytkowników na wszystkich etapach procesu projektowania, 2. projektowaniem iteracyjnym, 3. wielowymiarowym procesem badawczym w trakcie projektowania. Etapy metodyki UCD: 1. analiza biznesowa oraz badanie potrzeb użytkowników: a. analiza wymagań biznesowych projektu, b. badania jakościowe i ilościowe potrzeb użytkowników, c. tworzenie person, d. tworzenie ścieżek użycia, 2. prototypowanie systemu: a. tworzenie architektury informacji, b. projektowanie makiet i prototypów, c. projekt graficzny (visual design), 3. testowanie i weryfikowanie założeń z użytkownikami: a. oceny eksperckie, b. testy użyteczności. Strona 10 z 73

11 Blok 2. Definiowanie i analiza wymagań użytkowników 1. Analiza celów biznesowych Metody stosowane na etapie analizy celów biznesowych to: a. warsztaty z interesariuszami, b. benchmark (analiza konkurencji). Warsztaty spotkanie ze wszystkimi zainteresowanymi stronami (interesariuszami). Cele warsztatów: prezentacji metodyki i procesu projektowania w szerokim gronie zainteresowanych stron, uzyskanie wiedzy o klientach, produktach, procesach od różnych grup, zdefiniowane warunków brzegowych projektu (ograniczeń technologicznych, prawnych, czasowych), określenie kluczowych wskaźników efektywności projektu (niezbędna do oszacowania zwrotu z inwestycji ROI). Porównanie konkurencji Porównanie własnego produktu w odniesieniu do bezpośredniej lub pośredniej konkurencji według kluczowych z punktu widzenia interesariuszy kryteriów. Cele: usytuowanie produktu na tle konkurencji pozwala wyraźnie określić zdefiniować cele biznesowe, możliwość określenia najsłabszych i najmocniejszych cech systemu, zdefiniowane wskaźników efektywności na tle konkurencji. Strona 11 z 73

12 2. Wywiady pogłębione Opis metody badawczej, przykłady scenariuszy rozmowy. Wywiady pogłębione - najczęściej stosowana metoda badań potrzeb i wymagań użytkownika; służy uzyskaniu szczegółowych informacji od pojedynczych osób; pozwala uzyskać różne informacje od różnych typów osób, dzięki czemu możemy uzyskać szerszą perspektywę oraz daje możliwość pogłębienia tematów i wątków kluczowych z punktu widzenia projektu. Obok wywiadów pogłębionych stosowane są inne metody analiz potrzeb i wymagań użytkowników: - grupy fokusowe, - ankiety, - analizy etnograficzne. Wybór rodzaju wywiadu oraz sposobu analizy danych: a. ustrukturyzowany, b. nieustrukturyzowany, c. mieszany, d. telefoniczny, e. osobisty. Etapy: 1. Znajomość problemu, wymagań biznesowych, użytkowników (person). 2. Rekrutacja respondentów. 3. Przygotowanie scenariusza. 4. Przeprowadzenie wywiadu. 5. Analiza wyników (np. affinity diagram, nadanie wynikom priorytetów). 6. Przygotowanie raportu. Strona 12 z 73

13 Tworzenie pytań do wywiadu pogłębionego: krótkie zdania (mniej niż 20 słów), w jednym pytaniu jeden problem, konkretne i odnoszące się do doświadczeń użytkownika, sformułowane prostym i klarownym językiem (pilotaż!), unikanie wieloznacznych sformułowań, unikanie specjalistycznej, hermetycznej terminologii, unikanie pytań sugerujących. Zasada 5 faz prowadzenia wywiadu: 1. Wprowadzenie. 2. Rozgrzewka. 3. Właściwy wywiad. 4. Zakończenie. 5. Podsumowanie. Materiały: - protokół, - lista pytań, - materiały do notowania, - materiały i sprzęt do nagrywania. Korzyści: możliwość uzyskania dużej ilości szczegółowych informacji, możliwość uzyskanie szerszej perspektywy badanego problemu, możliwość uzyskania danych koniecznych na innych etapach procesu projektowania. Strona 13 z 73

14 Wady: - czasochłonność, - brak możliwości uzyskania danych od bardzo dużej próbki, - mniejsza możliwości uzyskania danych wrażliwych (np. finansowych, osobistych). 4. Persony Opis metody badawczej. Persona to archetypowy, konkretny, reprezentant docelowych użytkowników, który stanowi centrum oraz punkt odniesienia w projektowania UCD. Persony tworzone są, aby koncentrować się na konkretnym użytkowniku i jego potrzebach od początku procesu projektowania. Persony są zestawem fikcyjnych cech reprezentujących użytkownika, jego zachowań, postaw i celów, stworzonym w oparciu o dane pozyskane w fazie badań użytkownika. Persony charakteryzują się posiadaniem tożsamości - zdjęcia, imienia, osobowości, umiejętności, celów, także życiowych motywów, zadań, relacji, wymagań, oczekiwań, osobistej historii. Persona nie jest uśrednioną reprezentacją użytkowników, ale charakterystycznym przedstawicielem użytkowników. Persony są podstawą tworzenia scenariuszy użycia. Tworzenie person: rekomenduje się tworzenie 3-5 kluczowych person dla danego systemu. Kluczowe charakterystyki person zawierają: Tożsamość: imię, nazwisko, wiek, płeć, inne istotne dane demograficzne (np. miejsce zamieszkania), zdjęcie (!). Strona 14 z 73

15 Status persony: rodzaj użytkownika - pierwszo-, drugo-planowy, antyużytkownik (osoba, która nie będzie używała produktu). Cele: ogólne cele użytkownika, nie tylko odnoszące się do danego produktu. Umiejętności: jaki jest poziom wiedzy i umiejętności, obszary, w których jest ekspertem; wykształcenie, szkolenia, inne specjalne umiejętności. Zadania: jakiego typu zadania realizuje użytkownik, ich częstotliwość, ważność, czas trwania. Powiązania: powiązanie z istotnymi osobami, także z innymi personami. Potrzeby i wymagania: rzeczywiste potrzeby użytkownika, które warto wesprzeć cytatami. Oczekiwania. Persony różnią się od segmentów odbiorców definiowanych i stosowanych w marketingu: Persony Segmenty Jednostkowa grupowe dane jakościowe dane ilościowe dane narracyjne, cele, motywy, dane demograficzne i/lub zadania psychograficzne Strona 15 z 73

16 Przykładowe użycie person w zespole projektowym: Korzyści wynikające z zastosowania person: personalizacja i humanizacja użytkownika, ułatwia skoncentrowanie na potrzebach docelowych użytkowników, wpływa pozytywnie na komunikowanie i współpracę różnych grup projektowych, są podstawą do innych etapów i technik badawczych (np. w badaniach użytkowników oraz w różnych metodach badań użyteczności), persony nie zastępują testowania produktu z użytkownikami. 5. Warsztat - Persony Przygotowanie person przez uczestników szkolenia dla serwisu Warszawy Strona 16 z 73

17 Omówienie pojęć specjalistycznych SECTION elektronika i technologia informacyjna Fragment aktu uchwalonego przez Kongres Stanów Zjednoczonych dotyczący elektroniki i technologii informacyjnych (z roku 1998). Zawiera wytyczne dla agencji federalnych, by te kupowały elektronikę i produkty związane z technologią informacyjną dostępne dla osób niepełnosprawnych. SECTION 508 zawiera jeden specyficzny zapis ponad to, co znajduje się w WCAG 1.0 (z 1999 roku): Timed Responses: When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. Jeśli wymagamy od użytkownika podjęcia akcji (wypełnienia formularza, przeczytania tekstu itp.) w zadanym czasie, to musimy brać pod uwagę, że ze względu na niepełnosprawność może mu to zająć więcej czasu. Zanim czas upłynie powinniśmy poinformować użytkownika, że czas się kończy i dać mu możliwość przedłużenia czasu. ELMER 2 / ELMER formularze internetowe Dokument przygotowany przez norweskie Ministerstwo Handlu i Przemysłu skupiający się na użyteczności formularzy internetowych. Zawiera specyfikację: Elementy strony formularza: Nawigacja, Część informacyjna (podpowiedzi), Strona 17 z 73

18 Elementy stałe (Pomoc, przyciski: dalej i wstecz, tytuł, walidacja, przycisk: wyślij formularz). Struktura i kolejność: Ukrywanie pól zależnych, Paginacja, Struktura strony. Elementy formularza: Nagłówki i etykiety, Tabele, Przetwarzanie liczb, Konwencje i symbole (gwiazdki, ukryte pola, tabulacja). Pomoc i interakcja: Automatycznie wypełnione pola, Podpowiedzi, Błędy i ostrzeżenia, Kontekst formularza: Podsumowanie (potwierdzenie, drukowanie, ). PAS 78 Guide to good practice in commissioning accessible websites Publicly Available Specification (marzec 2006) to dokument powstały po raporcie z badań przeprowadzonych w 2004 roku, które pokazały, że 81% stron nie spełnia nawet najniższych wymagań dostępności (poziom A) WCAG 1.0. BS strony, serwisy, aplikacje internetowe Strona 18 z 73

19 British Standards Institution (BSI) Powstaje w grudniu 2010 roku. Uwzględnienie aspektów dostępności na wszystkich etapach życia projektu: Definiowanie, specyfikacja wymagań: cel, kontekst użycia, definiowanie grupy docelowej, potrzeby odbiorców, wymagania technologiczne, cele i zadania do wykonania. Decyzje strategiczne: poziom user experience, personalizacja, design, wspieranie przeglądarek, systemów operacyjnych, urządzeń. Zamawianie: zlecanie, własna produkcja. Produkcja: czy wybrana technologia wspiera dostępność, kontekst urządzeń?, najlepsze praktyki dostępności związane z wybraną technologią. Badanie: weryfikowanie aspektów dostępności podczas produkcji. Uruchomienie i utrzymanie: plan aktualizacji, weryfikacji i udoskonalania. Strona 19 z 73

20 Normy ISO związane z użytecznością ISO Human-centred design for interactive systems Zasady, dzięki którym projektowanie jest zorientowane na użytkownika: projekt być tworzony w odniesieniu do wiedzy o użytkownikach, zadaniach, które mają oni wykonać i odniesieniu do środowiska, w którym się znajdują, użytkownicy powinni być zaangażowani na etapie projektowania i wdrażania, projekt powinien być tworzony i weryfikowany poprzez testy z użytkownikami, proces projektowy powinien być iteracyjny, projekt powinien odnosić się do wszystkich aspektów doświadczeń użytkownika (percepcja, emocje), zespół projektowy powinien składać się ze specjalistów z różnych dziedzin: nie tylko graficy, programiści i UX, ale też eksperci od dostępności, marketingu, biznesu, użytkownicy końcowi, pomoc techniczna. ISO Software ergonomics for World Wide Web user interfaces Zakres: decyzje projektowe i strategiczne: cele strony i przełożenie na interfejs, kim są użytkownicy i czego oczekują od strony, projektowanie treści: koncepcja, o którą oparta jest strona, organizacja strony, nawigacja: organizacja treści, aby dotarcie do nich było łatwe, wyszukiwanie treści, prezentacja treści: wygląd stron i linków pomagający w osiągnięciu celów użytkownika, ogólne aspekty projektowe: pomoc i wsparcie, unikanie i komunikowanie błędów. Strona 20 z 73

21 ISO 9126 (oraz ISO 25010) Software engineering - Product quality Zestaw pojęć opisujących jakość oprogramowania takich, jak: Funkcjonalność: przydatność, dokładność, współdziałanie, bezpieczeństwo Niezawodność: dojrzałość, tolerancja błędów, przywracalność, Użyteczność: zrozumiałość, przyswajalność (nauka), używalność, atrakcyjność, Wydajność: zachowanie w czasie, zużywanie zasobów, Łatwość konserwacji: przejrzystość, łatwość modyfikacji, przewidywalność, łatwość testowania, Przenośność: adaptowalność, łatwość instalacji, koegzystencja, zastępowalność. ISO Zakres: Bezpieczeństwo: poufność, integralność, odporność, pewność, Kompatybilność: możliwość zastąpienia, współdziałanie, koegzystencja. Inne normy ISO związanych z ergonomią i użytecznością: User interfaces m?commid=45382&published=on Software and systems engineering m?commid=45086&published=on Strona 21 z 73

22 Omówienie normy WCAG w kontekście projektów internetowych WCAG 2.0 (2008) staje się standardem ISO (2012). Twórcą normy jest Web Accessibility Initiative (WAI) ( działająca przy W3C (World Wide Web Consortium). Zakres: 1. Percepcja - informacje i komponenty interfejsu muszą być dostępne, 2. Funkcjonalność - komponenty interfejsu i nawigacja muszą być funkcjonalne, 3. Zrozumiałość - treść oraz obsługa interfejsu musi być zrozumiała, 4. Rzetelność - walidujący się kod, zgodność ze specyfikacją. Strona normy: Rekomendacja na stronie Komisji Europejskiej: Widzialni.org: WCAG 2.0 a polskie ustawodawstwo W maju 2012 weszło w życie Rozporządzenie Rady Ministrów w sprawie Krajowych Ram Interoperacyjności, które zobowiązuje podmioty realizujące zadania publiczne do dostosowania swoich stron internetowych dla potrzeb osób wykluczonych cyfrowo. Nakłada obowiązek przystosowania serwisów WWW zgodnie z wytycznymi WCAG 2.0 na poziomie AA w ciągu 3 lat. Mówi również o tym, że każda większa modernizacja serwisu powinna zostać przeprowadzona już zgodnie z nowymi wytycznymi. Strona 22 z 73

23 Rozporządzenie do pobrania: Strona 23 z 73

24 Uwzględnienie standardów, norm i przepisów prawa w procesie projektowania W Polsce nie ma ustawy, która odnosiłoby się wprost do obowiązku stosowania standardów dostępności. Jednakże wiążące w tym temacie są przepisy: Konstytucji RP (w tym art. 32 i art. 69), Ustawa o dostępie do informacji publicznej (z dnia 6 września 2001 r.), Ustawa o informatyzacji działalności podmiotów realizujących zadania publiczne (z dnia 17 lutego 2005 r.), Karty Osób Niepełnosprawnych (Uchwała Sejmu Rzeczypospolitej Polskiej z 1 sierpnia 1997 r.). W powyższych dokumentach jest mowa o równości obywateli w dostępie do informacji bez dyskryminacji ze względu na jakiekolwiek kryteria - w tym stopień sprawności. W Stanach Zjednoczonych obowiązuje Section 508, w UE - WCAG 2.0. Strona 24 z 73

25 Blok 3. Architektura informacji Wprowadzenie do architektury informacji Perspektywa i definicja Jednym z wyzwań społeczeństwa informacyjnego, którego siłą napędową jest Internet, jest radzenie sobie z nadmiarem informacji. Jeszcze kilka lat temu, tworzenie treści, które znajdowały się na stronach internetowych, było zajęciem dla wąskiej grupy ludzi, którzy posiadali wiedzę o języku znaczników HTML. Dziś każdy może być twórcą treści internetowych. Portale społecznościowe i informacyjne, możliwość łatwej publikacji tekstów, zdjęć i filmów powodują, że informacji w Internecie przybywa bardzo szybko. Odnajdywanie pośród nich tych cennych, tych, na których nam zależy, jest nie lada sztuką. Architektura informacji jest dziedziną wiedzy, która zajmuje się sposobami gromadzenia, organizacji i prezentacji informacji tak, by dotarcie do nich i ich wykorzystywanie było możliwie najłatwiejsze Cel architektury informacji: najłatwiejsze dotarcie do informacji i jej wykorzystanie. Grupowanie danych Schemat alfabetyczny ( Częste pytania: Czy powtarzać informacje pod różnymi nazwami? TAK. Czy używać nietechnicznych (czasem niepoprawnych), ale znanych etykiet? TAK. Strona 25 z 73

26 Czy uwzględniać wszystkie strony lub tematy? Niekoniecznie, ważne by były wszystkie najpopularniejsze treści, których szukają użytkownicy (google analytics) Strona 26 z 73

27 Schemat geograficzny ( Geolokalizacja: Schemat tematyczny ( Strona 27 z 73

28 Schemat wg audytorium ( Schemat zadaniowy ( Strona 28 z 73

29 Schemat bazodanowy ( Strona 29 z 73

30 Głębokość i szerokość struktury Rekomendacja: nie za głęboko i nie za szeroko. Jeśli struktura rozrasta się zanadto trzeba zastanowić się nad podziałami wyższego rzędu. Nazewnictwo i etykiety Najważniejszym kryterium, jakie powinny spełniać etykiety, jest skuteczność przekazywania informacji. Nagłówki Nie powinny przekraczać 8 słów i powinien spełniać kryteria: przejrzystości, kompletności. Strona 30 z 73

31 Nagłówek nie powinien być zdaniem: Prawda w sieci nie jest zawsze jasna zdanie, Prawda w sieci nie zawsze jasna nagłówek. Linki Odnośniki zawarte w tekście powinny jasno informować co stanie się, gdy zostaną użyte (gdzie przekierują użytkownika, jaka akcja zostanie wykonana). Jeśli dla przykładu link prowadzi do pobrania dokumentu PDF, to powinno się tę informację zawrzeć w linku i uzupełnić ją o rozmiar pliku, co ma szczególne znaczenie na urządzeniach mobilnych. Np. Czytaj fragment książki (PDF 0,8 MB). Etykiety elementów nawigacyjnych Zazwyczaj etykiety nawigacyjne mają duże ograniczenia długości co sprawia, że słowa należy dobierać wyjątkowo ostrożnie, uwzględniając możliwość przekazania informacji jak największej grupie użytkowników. Strona 31 z 73

32 Dylemat skuteczności etykiety: MGOPS, Miejsko-Gminny Ośrodek Pomocy Społecznej, Pomoc społeczna. Badanie wyników wyszukiwania w serwisie i słów kluczowych, dzięki którym użytkownicy docierają do treści, jest dobrym źródłem wiedzy o tym, jakie etykiety są przez użytkowników zrozumiałe. Etykiety graficzne - ikony Słabością ikon jest fakt, że przy ich pomocy można skutecznie przedstawić bardzo ograniczoną ilość terminów. Bez problemu utworzymy ikony dla takich tematów jak sport (np. piłka), motoryzacja (np. samochód) czy mapy (kształt państwa lub kontynentu), jednak kiedy pojawiają się pojęcia abstrakcyjne, jak np. zintegrowanie zarządzanie, polityka prywatności lub spółki prawa handlowego, język ikon okazuje się bezradny. Strona 32 z 73

33 Strona 33 z 73

34 Nawigacja Adres URL (Uniform Resource Locator) Konstrukcja adresu strony internetowej wydaje się bez znaczenia pod warunkiem, że klikając w link, dostaniemy się na odpowiednią witrynę. Jednak dobrze zbudowany adres może przekazać wiele informacji o stronie, do której prowadzi, np. o jej położeniu w strukturze serwisu lse 0os3g3Z4-gYG93QwMLRydXA89go2CXYENnAwtnM_2CbEdFAK5HOwg!/ Nawigacja globalna Duże serwisy internetowe potrzebują jasnego rozdzielenia treści na główne grupy tematyczne. Odpowiedzialność za taki podział spoczywa na nawigacji globalnej, tj. elemencie nawigacyjnym, który pojawia się w takiej samej formie na wszystkich podstronach danego serwisu. Strona 34 z 73

35 Nawigacja lokalna Zadaniem nawigacji lokalnej jest przedstawienie najbliższego tematycznego otoczenia strony, na której się znajdujemy. Warto zwrócić uwagę, że czasem stosuje się rozwiązanie polegające na łączeniu nawigacji globalnej i lokalnej. Rozważając takie rozwiązanie trzeba pamiętać, że tworzenie bardzo rozbudowanego menu z wieloma pozycjami pierwszego i drugiego poziomu to tylko pozór użyteczności. Gdyby zapytać użytkowników, to z pewnością chcieliby dostać bardzo szeroki wachlarz opcji do wyboru. Jednak w tym przypadku więcej nie oznacza lepiej. Dostarczanie zbyt wielu opcji wyboru zawęża możliwość szybkiego i racjonalnego podjęcia decyzji o wyborze właściwej ścieżki nawigacyjnej. Strona 35 z 73

36 Mapa strony Strona 36 z 73

37 Przewodniki Wyszukiwanie Procesy wyszukiwania: Wpisanie frazy > przycisk Szukaj > analiza wyników > klikanie i szukanie treści lub Wpisanie frazy > analiza podpowiedzi > analiza wyników > klikanie i szukanie treści Strona 37 z 73

38 Strona 38 z 73

39 Strona 39 z 73

40 Aby skutecznie pomagać użytkownikowi w odnajdywaniu treści nie można pozostawić kwestii wyszukiwania jedynie algorytmowi porównującemu wyrazy. Trzeba posłużyć się tzw. słownikiem kontrolowanym, czyli bazą fraz dla których będziemy sterować wynikami wyszukiwania. Frazy do słownika kontrolowanego można pozyskać z analizy słów kluczowych (Google Analytics) lub poprzez analizę fraz wyszukiwanych w wyszukiwarce lokalnej. Metadane Metadane to dodatkowe informacje opisujące treści internetowe, które mogą być użyte do sprawniejszego indeksowania treści oraz do polepszenia mechanizmów wyszukiwania. Mogą być generowane w sposób automatyczny na podstawie słowników lub częściowo edytowane przez ekspertów tworzących treści. Np. Artykuł dotyczący robota kuchennego Zelmer możemy dodatkowo opisać używając synonimów: mikser, mixer, robotkuchenny (bez spacji), Zelmer. Odnajdywalność (findability) Termin określający możliwość dotarcia do treści wewnątrz serwisu internetowego, a także docieranie z innych portali. Peter Morville (definicja): możliwość określenia właściwej strony internetowej (dla danego tematu, problemu) oraz przejście przez jej strukturę nawigacyjną w celu dotarcia do poszukiwanej informacji. Strona 40 z 73

41 Współczynnik zagubienia L: współczynnik zagubienia N: liczba różnych stron odwiedzonych podczas wykonywania zadania S: liczba wszystkich stron odwiedzonych podczas wykonywania zadania (wliczając ponowne odwiedziny tych samych stron) R: minimum stron potrzebnych do wykonania zadania Przeprowadzone przez Pauline A. Smith badania wykazały, że wartością graniczną, powyżej której pojawia się u badanych uczucie zagubienia, jest wartość 0,42. Prawo trzech kliknięć - prawda czy mit? MIT. Reguła ma polegać na tym iż rzekomo użytkownicy, którzy na stronie internetowej nie są w stanie odnaleźć pożądanych treści za pomocą trzech kliknięć, zamykają stronę i przechodzą do innej. Żaden z autorów, którym przypisywane jest to prawo, nie przyznaje się do niego. Lepsze rozumienie prawa: Nie zmuszaj użytkownika do niepotrzebnego, nieuzasadnionego klikania. Każde kliknięcie jest uzasadnione, jeśli w istotny sposób przybliża użytkownika do osiągnięcia zamierzonego celu. Strona 41 z 73

42 Warsztaty cardsorting i navigation stress test Cardsorting Zamknięte sortowanie etykiet pierwszego i drugiego poziomu nawigacji witryny um.warszawa.pl Navigation stress test Analiza nawigacji strony: Odpowiedz na pytania: O czym jest ta strona? (zakreśl tytuł strony) Jaka to strona? (zakreśl nazwę strony) Jakie są główne działy na tej stronie? (zaznacz X) W której z głównych sekcji znajduje się ta strona? (zaznacz X) Jak dotrzeć do strony głównej? (zaznacz literą H - Home) Jak trafić do strony głównej działu, w którym jestem? (zaznacz literą T - Top) Grupy linków: D - Details - strony bardziej szczegółowe N - Nearby - strony na tym samym poziomie sekcji S - Same page - strony na tej samej witrynie, ale dalsze O - Off-site - linki do stron zewnętrznych Jak dotrę do tej strony ze strony głównej? - ścieżka wizualna Strona 42 z 73

43 Blok 4. Projektowanie rozwiązań webowych i mobilnych Participatory design Współprojektowanie (cooperative design). Opis technik wspomagających wspólne projektowanie. Korzyści: możliwość spojrzenia z innej perspektywy, zrozumienia problemów, słownictwa, toku rozumowania użytkowników. Problemy: użytkownicy często nie są wstanie precyzyjnie określić swoich potrzeb, trzeba filtrować ich uwagi. Cardsorting 1994 Jakob Nielsen Sortowanie karteczek pozwala z dystansem spojrzeć na strukturę informacyjną serwisu, dowiedzieć się, jakimi nazwami posługują się użytkownicy i jak budują między nimi relacje. Metoda ta wpływa pozytywnie na odnajdywalność treści. Narzędzia zdalne: Prototypowanie na papierze Korzyści: Metoda pozwala na szybkie zilustrowanie ogólnej koncepcji i większości funkcji serwisu. Mogą się w nią zaangażować również osoby nie mające doświadczenia w używaniu narzędzi do prototypowania. Usprawnia komunikację, można szybko pokazać swoje idee. Można przeprowadzić proste testy. Strona 43 z 73

44 Wady: Brak interaktywności i pomijanie aspektów technologicznych. Brak przewijania, różnych rozdzielczości. Niska wartość estetyczna. Trudne do wykonania w przypadku dużych projektów. Prototypowanie komputerowe Szeroki wachlarz narzędzi do prototypowania: od Power Point do Axure. Nawet przy pomocy prostych narzędzi, które mają możliwość tworzenia linków, można zasymulować dużo ścieżek użytkownika i mechanizmów, które znajdą się na stronie. Prototypy komputerowe działające w przeglądarce internetowej mogą być już na wczesnym etapie testowane i weryfikowane z użytkownikami. Im wcześniej pokażemy użytkownikom choćby nie w pełni funkcjonalne makiety, tym lepiej. Ewentualne korekty dużo łatwiej wykonywać na wczesnych etapach, niż kiedy prototyp jest już na ukończeniu. Warsztat projektowanie, szkicowanie Współprojektowanie serwisu (wersja przenośna & stacjonarna) Przeprojektowanie strony: Projektowanie serwisu pod rozdzielczości 1200px (wersja Web), 768px (wersja tabletowa), 320px (wersja smartfonowa). Strona 44 z 73

45 Wzorce projektowe Gridy Strona 45 z 73

46 Strona 46 z 73

47 Nawigacja Strona 47 z 73

48 Menu horyzontalne Breadcrumb menu menu okruszkowe Strona 48 z 73

49 Paginacja Przewijanie z doczytywaniem Strona 49 z 73

50 Wizard (kreator) Captcha Strona 50 z 73

51 Stopka Formularze Najlepsze praktyki przy projektowaniu formularzy: Formularze pełnią często kluczową rolę w komunikacji. Rejestracja, koszyk, logowanie, przelewanie pieniędzy - to niezwykle delikatne procesy, gdzie błędy mogą być kosztowne. 6 komponentów składowych: etykiety (labels), pola input, akcje butony, Strona 51 z 73

52 pomoc, informacje potwierdzające lub negujące, walidacja. Strona 52 z 73

53 Gdzie umieszczać etykiety u góry: proste formularze czas dotarcia wzroku od etykiety do pola input: 50ms do prawej: średnio skomplikowane formularze czas dotarcia wzroku od etykiety do pola input: 240ms do lewej: rozbudowane formularze czas dotarcia wzroku od etykiety do pola input: 500ms Przyciski akcji Strona 53 z 73

54 Zawsze jedna kolumna Pomoc statyczna: obok pól input np. liczba znaków w haśle (np. min 6 znaków), wywoływana przez użytkownika po naciśnięciu ikony informacyjnej. Strona 54 z 73

55 Informacje potwierdzające lub/i walidacja: wartości pól input powinny być walidowane na bieżąco po wpisaniu kolejnych liter lub po przejściu do kolejnego pola, walidacja końcowa tylko wtedy, kiedy konieczna. Strona 55 z 73

56 Dobry przykład rozdzielenia logowania i rejestracji: Dropbox Technologie Przegląd technologii mobilnych w kontekście projektowania na nieznane urządzania Omówienie przykładów: Strona 56 z 73

57 Responsive design (liquid) Rozwiązania mobilne a natywne aplikacje Wersja mobilna - w przeglądarce: dzielenie się treściami poprzez link, linki nie otwierają aplikacji, brak cenzora przy produkowaniu treści, silniki większości przeglądarek mobilnych pozwalają tworzyć nowoczesny kod, konsumpcja treści poprzez przeglądarki mobilne ciągle rośnie, HTML5 co raz lepiej wspierany (browser storage, geolokalizacja). Natywne aplikacje większość osób używa mniej niż 6 aplikacji w ciągu dnia, niepewność, czy aplikacja przejdzie poprawnie akceptację do App Store, większe koszty wdrożenia, szybkość działania jest przewagą, ale silniki javascript są też co raz szybsze, możliwość działania bez dostępu do internetu, łatwa monetyzacja w przypadku aplikacji płatnych. Istotne ograniczenia Ograniczenia związane z urządzeniami mobilnymi; kontekst użytkowania aplikacji na urządzeniach mobilnych - ograniczenia skupienia uwagi. Na urządzeniach mobilnych należy realizować tylko najistotniejsze zadania. Strona 57 z 73

58 Minimalne rozmiary punktów dotyku (target touch points) to według rekomendacji Apple 44x44px, według Microsoftu 34x34px, a według Nokii to 28x28px. Średni rozmiar palca to px, a w przypadku kciuka 72px. Strona 58 z 73