diff --git a/materiały na PBR (laboratorium)/06_prototypowanie_i_ciągła_integracja_lab.ipynb b/materiały na PBR (laboratorium)/06_prototypowanie_i_ciągła_integracja_lab.ipynb index 1b25afa..1d6ef38 100644 --- a/materiały na PBR (laboratorium)/06_prototypowanie_i_ciągła_integracja_lab.ipynb +++ b/materiały na PBR (laboratorium)/06_prototypowanie_i_ciągła_integracja_lab.ipynb @@ -49,8 +49,8 @@ "\n", "Ocena maksymalna: 10 punktów\n", "\n", - "## Pierwszy sprint!\n", - "Zalóżcie pierwszy sprint. \n", + "## Drugi sprint!\n", + "Zalóżcie drugi sprint. \n", "Przenieście wybrane elementy (\"issues\") z backloga do sprintu, podzielcie je na zadania, przypiszcie zadania ludziom i skomentujcie je (w ich opisie). \n", "Oszacujcie w punktach pracochłonność wykonania każdego zadania." ] diff --git a/materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_integracyjne_i_systemowe-checkpoint.ipynb b/materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_systemowe_i_akceptacyjne-checkpoint.ipynb similarity index 100% rename from materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_integracyjne_i_systemowe-checkpoint.ipynb rename to materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_systemowe_i_akceptacyjne-checkpoint.ipynb diff --git a/materiały na PPB (wykład)/.ipynb_checkpoints/10_wybrane_zagadnienia_użyteczności-checkpoint.ipynb b/materiały na PPB (wykład)/.ipynb_checkpoints/10_wybrane_zagadnienia_użyteczności-checkpoint.ipynb index 28cb6c0..a2ecd97 100644 --- a/materiały na PPB (wykład)/.ipynb_checkpoints/10_wybrane_zagadnienia_użyteczności-checkpoint.ipynb +++ b/materiały na PPB (wykład)/.ipynb_checkpoints/10_wybrane_zagadnienia_użyteczności-checkpoint.ipynb @@ -14,6 +14,13 @@ "![Logo 2](https://git.wmi.amu.edu.pl/AITech/Szablon/raw/branch/master/Logotyp_AITech2.jpg)" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 1. Pojęcie użyteczności" + ] + }, { "cell_type": "markdown", "metadata": {}, @@ -22,7 +29,7 @@ " \n", "

Użyteczność

\n", "\n", - "Użyteczność narzędzia: łatwość, z jaką ludzie potrafią korzystać z pewnego narzędzia w celu osiągnięcia określonego celu.\n", + "Użyteczność narzędzia: łatwość, z jaką ludzie potrafią korzystać z tego narzędzia w celu osiągnięcia określonego celu.\n", "\n", "

Cechy aplikacji użytecznej

\n", " \n", @@ -36,6 +43,63 @@ "" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 2. Wskazówki do tworzenia użytecznej aplikacji" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 2.1. Klasyka w oparciu o \"Don't make me think\"" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "
\n", + " \n", + "Przeczytaj w Internecie\n", + "\n", + "
    \n", + " \n", + "
  1. Usability Means…
    2. \n", + "\n", + "
  2. Web applications should explain themselves.
    3. \n", + "\n", + "
  3. Don’t Make Me Think
    4. \n", + "\n", + "
  4. Don’t waste my time
    5. \n", + " \n", + "
  5. Users still cling to their back buttons
    6. \n", + "\n", + "
  6. We’re creatures of habit
    7. \n", + "\n", + "
  7. No Time for Small Talk
    8. \n", + "\n", + "
  8. Don’t lose search
    9. \n", + "\n", + "
  9. We form mental site-maps
    10. \n", + "\n", + "
  10. Make it easy to go home
    11. \n", + " \n", + "
\n", + "\n", + "
\n" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 2.2. Podejście (bardziej) współczesne" + ] + }, { "cell_type": "markdown", "metadata": {}, @@ -74,16 +138,388 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "## Użyteczność portali internetowych\n", - "### 10 heurystyk Jakoba Nielsena i Rolfa Molicha\n", - "### Zasady dobrej nawigacji" + "## 3. Zasady dobrej nawigacji na portalu internetowym\n", + "### 3.1. Pojęcie nawigacji" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "
\n", + " \n", + " Nawigacja to stały, niezmieniający się zestaw elementów w serwisie ułatwiający poruszanie się na niej.\n", + " \n", + "Najczęściej stosowanymi elementami nawigacji są: \n", + "
    \n", + "
  • Menu główne
    • \n", + "
  • Menu narzędziowe
    • \n", + "
  • Identyfikator witryny
    • \n", + "
  • Wyszukiwarka
    • \n", + "
  • Odsyłacz do strony startowej (zawarty w logo)
    • \n", + "
  • Flagi narodowe (przełączenie języków)
    • \n", + "
\n", + "\n", + "
" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ - "## Tworzenie raportu użyteczności" + "## 3.2. Cechy dobrej nawigacji" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + " * Szybkie przechodzenie po różnych elementach serwisu.\n", + " * Łatwe prowadzenie użytkownika do poszukiwanej informacji. \n", + " * Klarowność: użytkownik wie gdzie jest, gdzie może się skierować, jak wrócić, a także posiada informacje o odwiedzonych miejscach. \n", + " * Oszczędność: główne menu witryny nie powinno zawierać zbyt wielu elementów (między 5 a 9)" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 3.3. Zasady użytecznej nawigacji" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 1. Widoczność\n", + "Wszystkie elementy nawigacji muszą być bardzo dobrze widoczne na każdej stronie i podstronie serwisu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 2. Przewidywalność\n", + " * Nazwy elementów menu powinny pozwalać na przewidzenie zawartości\n", + " * Elementy menu powinny informować użytkownika o całej zawartości witryny.\n", + " * Odwiedzone linki powinny być oznaczone innym kolorem niż nieodwiedzone. " + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 3. Łatwość orientacji w strukturze serwisu\n", + "* Powinno się stosować różne style wyróżnienia jego elementów:\n", + " * dla całej kategorii, na której aktualnie znajduje się kursor (np. Aktualności),\n", + " * dla pozycji w menu, z której aktualnie korzysta użytkownik (np. Publikacje zagraniczne),\n", + " * dla pozostałych elementów serwisu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 4. Zasada odwróconej piramidy\n", + " * Na najwyższym poziomie należy umieścić kategorie najbardziej ogólne, a następnie przechodzić do podziału bardziej szczegółowego. \n", + " * Na tym samym poziomie powinny znajdować się kategorie o tym samym stopniu szczegółowości." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 5. Właściwe nazewnictwo\n", + " * Wykluczający podział etykiet menu: \n", + " * dana pozycja w menu może należeć tylko do jednej kategorii.\n", + " * Proste nazewnictwo: \n", + " * etykiety powinno formułować się w języku zrozumiałym dla użytkownika,\n", + " * powinno unikać się specjalistycznego słownictwa.\n", + " * Unikalne nazwy: \n", + " * dana nazwa powinna pojawiać się w serwisie internetowym nie więcej niż raz,\n", + " * każda strona powinna mieć swoja nazwę.\n", + " * Nazwa strony musi być dobrze widoczna:\n", + " * nazwa strony musi być w dobrze umiejscowiona i wyróżniona za pomocą rozmiaru i koloru czcionki.\n", + " * Nazwa strony lub podstrony musi być zgodna z nazwą odsyłacza, który do niej prowadzi." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 6. Spójność w wyglądzie i działaniu elementów nawigacyjnych\n", + "* Należy stosować te same konwencje w obrębie całego menu. \n", + "* Elementy pierwszego poziomu powinny pozostawać niezmienne w trakcie korzystania z całego serwisu internetowego. \n", + "* Wszystkie pozycje w menu powinny funkcjonować na tej samej zasadzie. \n", + "* Przy formułowaniu nazw w menu należy w każdym przypadku stosować tę samą formę gramatyczną.\n", + "* Pozycje menu należące do jednego poziomu powinny być sformatowane w jednym stylu." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 4. Metody badania użyteczności" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 4.1. Automatyczne metody badania użyteczności" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Badanie współczynnika konwersji\n", + "**Współczynnik konwersji** wskazuje, jaka część internautów odwiedzających daną stronę dokonała pożądanej akcji np.\n", + " * Dokonała zakupu\n", + " * Wypełniła formularz\n", + " * Wysłała maila na wskazany adres\n", + " * Zarejestrowała się do systemu\n", + " * Pobrała software" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Testy A/B (testy porównawcze)\n", + "* Metoda polega na porównaniu dwóch wersji tej samej aplikacji.\n", + "* Najczęściej stosowana jest do stron internetowych.\n", + "* Różnicę (postęp lub regres) między wersjami wyznacza się poprzez porównanie wartości pewnej miary, np. współczynnika konwersji dla stron internetowych. \n", + "\n", + "[Przeczytaj w Internecie](https://www.optimizely.com/ab-testing/)" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Analityka ruchu na portalu internetowym\n", + "Metoda polega na obserwacji dotyczących ruchu na witrynie, takich jak:\n", + " * Wskaźnik odrzuceń – procentowa wartość osób, które opuściły stronę wejściową serwisu bez wykonania żadnej akcji\n", + " * Wskaźnik porzuceń – wskaźnik analogiczny dla podstron danego serwisu,\n", + "Metoda wskazuje działania użytkownika – nie wskazuje jego przyczyn. \n", + "\n", + "Przykładowa witryna: \n", + "https://www.google.com/analytics/" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Click-tracking\n", + "\n", + "Metoda dostarcza informacji o poszczególnych elementach strony za pomocą następujących typów informacji\n", + " * Heat maps. \n", + " * Wskazują, w jakie miejsca na stronie ludzie klikają (see what’s hot and what’s not).\n", + " * Confetti\n", + " * Analiza kliknięć: jak klikały poszczególne grupy użytkowników i w poszukiwaniu czego.\n", + " * Scrollmap\n", + " * Analiza, jak daleko w dół strony użytkownicy przewijają stronę – pozwala przeanalizować miejsca, w których strona jest najczęściej porzucana.\n", + " * Overlay report\n", + " * Liczba kliknięć na poszczególne elementy strony.\n", + "\n", + "Przykładowy dostawca: \n", + "http://www.crazyegg.com" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Analiza kontrastu\n", + "\n", + "Dostarcza informacji o kontraście pomiędzy elementami strony, co jest szczególnie istotne dla osób z upośledzeniem wzroku.\n", + "\n", + "* Przykładowy adres\n", + " * https://webaim.org/resources/contrastchecker/\n", + " * Można wpisać adres strony, która ma zostać przeanalizowana pod względem kontrastu – otrzymuje się pełen raport." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 4.2. Metody z udziałem użytkowników\n", + "\n", + "W metodach z udziałem użytkowników można posłużyć się zastosowaniem *persony*, w celu optymalizacji kosztów badania.\n", + " * **Persona** to fikcyjna postać stworzona by reprezentować typy użytkowników (demograficzne i technograficzne).\n", + " * Persony to inaczej archetypy grup użytkowników i ich potrzeb. Dzięki personom cała populacja docelowa reprezentowana jest przez kilka konceptów.\n", + " > Przykład persony: Jan Kowalski, lat 37, elektryk, mieszkaniec Ząbkowic Śląskich\n", + " \n", + " Przykładowy proces testowania użyteczności z udziałem użytkowników:\n", + " 1. Określ grupy użytkowników np. przy użyciu persony (co najmniej jedna persona na grupę).\n", + " 2. Dla każdej persony utwórz potencjalny scenariusz użycia – w jaki sposób dana persona chce korzystać z systemu.\n", + " 3. Dla każdej persony zorganizuj użytkowników reprezentatywnych (minimum jednego użytkownika dla persony).\n", + " 4. Poproś ich o wykonanie zadań charakterystycznych dla danej persony.\n", + " 5. Obserwuj lub nagrywaj działania użytkowników: gdzie im się powodzi, a gdzie mają trudności.\n", + " 6. Potencjalnie poproś użytkowników o wypełnienie ankiet.\n", + "\n", + "Wyróżniamy następujące typy metod z udziałem użytkowników:\n", + " * podgląd sesji użytkowników.\n", + " * obserwacja użytkownika,\n", + " * metoda wywiadu." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Podgląd sesji użytkowników\n", + "* Działalność użytkownika jest „nagrywana”.\n", + "* Autor oprogramowania może odtworzyć działania użytkownika z perspektywy użytkownika.\n", + "* Każde kliknięcie, poruszenie myszą, przesunięcie kursora zostaje zapisane." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Obserwacja użytkownika\n", + "* Działalność użytkownika jest obserwowana.\n", + "* Obserwator zapisuje poczynania użytkownika.\n", + "* Obserwacje są analizowane w celu ulepszenia użyteczności aplikacji." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Metoda wywiadu\n", + " * Sposoby przeprowadzenia wywiadu:\n", + " * Analiza celów użytkowników i wykonywania przez nich zadań,\n", + " * Dyskusja prowadzona przez moderatora,\n", + " * Wypełnienie ankiet / kwestionariuszy." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.2. Metodologia badania\n", + "Opis tej części zależy od przejętej metody badania. Przykładowo, dla metody wywiadu część ta może mieć następującą postać:\n", + "\n", + "### 5.2.1. Zakres badania\n", + " * Określenie zakresu projektowego: badanie gotowego produktu, czy ocena prototypu,\n", + " * Określenie celu, np., wskazanie wyłącznie błędów w systemie, czy również wskazanie proponowanych ulepszeń,\n", + " * Określenie zastosowanej metody badania użyteczności.\n", + "\n", + "### 5.2.2. Profile użytkowników\n", + " * Określenie kilku segmentów odbiorców pod względem:\n", + " * Danych demograficznych\n", + " * Doświadczenia z programami podobnymi (wcześniejszymi wersjami systemu)\n", + " * Oczekiwań względem systemu\n", + "\n", + "### 5.2.3. Grupa badawcza\n", + " * Określenie liczebności grupy badawczej (około 5 osób)\n", + " * Określenie charakterystyki grupy badawczej pod względem różnych kryteriów , np.\n", + " * płeć, \n", + " * wiek, \n", + " * miejsce zamieszkania, \n", + " * wykształcenie, \n", + " * zawód, \n", + " * wielkość firmy, \n", + " * branża, \n", + " * obsługa komputera, \n", + " * doświadczenie z podobnymi programami, itp.\n", + " * Liczebność i charakterystykę grupy badawczej można zobrazować za pomocą wykresów.\n", + "\n", + "### 5.2.4. Scenariusz badania\n", + "W tej części należy opisać, jak będzie przebiegać scenariusz badania.\n", + "Przykładowy scenariusz badania w metodzie wywiadu:\n", + "1. Omówienie zadań i sposobu wypełniania kwestionariusza\n", + "2. Podanie informacji o regulaminie przeprowadzenia testu wykonania zadań\n", + "3. Test wykonania zadań\n", + "4. Wypełnienie przygotowanego kwestionariusza przez użytkowników\n", + "\n", + "### 5.2.5. Lista zadań do wykonania przez użytkowników\n", + "W tej częścI dla każdego zadania należy podać kryterium pomyślnego ukończenia zadania. Lista zadań może być podana w postaci tabelki:\n", + " * Opis zadania\n", + " * Kryterium ukończenia zadania\n", + "\n", + "### 5.2.6. Ocena wykonania zadań \n", + "W tej części należy ocenić, jak badani wykonali zadania.\n", + "Przykładowa ocena wykonania zadań:\n", + " * Liczba błędów krytycznych użytkownika\n", + " * Liczba błędów niekrytycznych użytkownika\n", + " * Liczba zadań wykonanych zgodnie z założeniami\n", + " * Liczba zdań niewykonanych zgodnie z założeniami\n", + " * Czas wykonania zadań\n", + "\n", + "Ten etap raportu można zakończyć wykresami." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.3. Obszary problemowe\n", + "Obszary problemowe to **wnioski** z badania użyteczności.\n", + " * W tej częśći raportu określone zostają obszary problemowe (składowe systemu, które sprawiają kłopoty).\n", + " * Dla każdego obszaru problemowego określa się zestaw problemów użytkowania.\n", + " * Problem użytkowania składa się z:\n", + " * Tytułu problemu,\n", + " * Opisu problemu,\n", + " * Jeśli problemem jest zbyt długi czas wykonania zadania, to można podać średnie czasy rozwiązania,\n", + " * Filmiku wideo (jeśli takim dysponujemy),\n", + " * Rekomendacji rozwiązania problemu,\n", + " * Opisu proponowanego scenariusza działania użytkownika po rozwiązaniu problemu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.4. Dodatki\n", + "W tej części raportu składamy materiały pomocnicze, np.\n", + " ### 5.4.1. Ankieta\n", + "\n", + "W ankiecie mogą znaleźć się przykładowe pytania:\n", + " * Jak ocenia Pan/Pani trudność poszczególnych zadań?\n", + " * Co sprawiło Panu/Pani największy problem podczas testów?\n", + " * Jakie inne funkcjonalności byłyby pożyteczne (wskazać listę do wyboru)?\n", + " * Jakie elementy systemu były niezrozumiałe?\n", + "\n", + " Wyniki ankiety potestowej możemy przedstawić na wykresach.\n", + " \n", + "### 5.4.2. Inne materiały pomocnicze\n", + "Przykładowe materiały pomocnicze:\n", + " * Lista filmów video ilustrujących błędy użyteczności aplikacji,\n", + " * Wnioski i rekomendacje ekspertów użyteczności,\n", + " * Inne materiały w zależności od zastosowanej metody badawczej." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# Podsumowanie wykładu\n", + "1. Tworząc aplikację, myśl przede wszystkim o jej użyteczności, a potem dopiero o jej funkcjonalności.\n", + "2. O sukcesie aplikacji stanowi pomysł, a nie wielość funkcji.\n", + "3. Zawsze (!) pamiętaj o wskazówkach użyteczności.\n", + "4. Tworząc portal internetowy, stosuj zasady dobrej nawigacji.\n", + "5. Przekonaj się, jak Twój program jest używany – wykonaj badanie użyteczności." ] } ], diff --git a/materiały na PPB (wykład)/06_prototypowanie i ciągła integracja.ipynb b/materiały na PPB (wykład)/06_prototypowanie i ciągła integracja.ipynb index a74d111..a72887d 100644 --- a/materiały na PPB (wykład)/06_prototypowanie i ciągła integracja.ipynb +++ b/materiały na PPB (wykład)/06_prototypowanie i ciągła integracja.ipynb @@ -451,7 +451,7 @@ "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", - "version": "3.7.6" + "version": "3.8.5" }, "subtitle": "06. Prototypowanie i ciągła integracja[wykład]", "title": "Przygotowanie do projektu badawczo-rozwojowego", diff --git a/materiały na PPB (wykład)/09_testowanie_integracyjne_i_systemowe.ipynb b/materiały na PPB (wykład)/09_testowanie_systemowe_i_akceptacyjne.ipynb similarity index 92% rename from materiały na PPB (wykład)/09_testowanie_integracyjne_i_systemowe.ipynb rename to materiały na PPB (wykład)/09_testowanie_systemowe_i_akceptacyjne.ipynb index 008bdea..0f633e3 100644 --- a/materiały na PPB (wykład)/09_testowanie_integracyjne_i_systemowe.ipynb +++ b/materiały na PPB (wykład)/09_testowanie_systemowe_i_akceptacyjne.ipynb @@ -7,7 +7,7 @@ "![Logo 1](https://git.wmi.amu.edu.pl/AITech/Szablon/raw/branch/master/Logotyp_AITech1.jpg)\n", "
\n", "

Przygotowanie do projektu badawczo-rozwojowego

\n", - "

9. Testowanie systemowe i adaptacyjne[wykład]

\n", + "

9. Testowanie systemowe i akceptacyjne[wykład]

\n", "

Krzysztof Jassem (2021)

\n", "
\n", "\n", @@ -18,7 +18,7 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "# 1. Testowanie systemowe i adaptacyjne - wyjaśnienie pojęć" + "# 1. Testowanie systemowe i akceptacyjne - wyjaśnienie pojęć" ] }, { @@ -39,9 +39,9 @@ "metadata": {}, "source": [ "
\n", - "

Testowanie adaptacyjne

\n", + "

Testowanie akceptacyjne

\n", " \n", - "Przedmiotem testowania adaptacyjnego jest oprogramowanie stanowiące przedmiot dostawy do użytkownika w docelowym środowisku pracy.\n", + "Przedmiotem testowania akceptacyjnego jest oprogramowanie stanowiące przedmiot dostawy do użytkownika w docelowym środowisku pracy.\n", " * Testowana jest zgodność z wymaganiami i potrzebami użytkownika.\n", " * Testowanie akceptacyjne przeprowadza użytkownik / klient.\n", "
" @@ -88,7 +88,7 @@ "**Testy zdroworozsądkowe** mają wykazać, że aplikacja nie działa zgodnie ze stawianymi przed nią wymaganiami.\n", ">\"Smoke test określa, czy w ogóle coś działa, a sanity test - czy działa tak, jak ma działać”.\n", "\n", - "**Przykład przypadków testowych na poziomie testowania regresywnego:**\n", + "**Przykład przypadków testowych na poziomie testowania zdroworozsądkowego:**\n", "\"Przykład" ] }, @@ -188,7 +188,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -199,7 +198,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -208,7 +206,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -220,12 +217,11 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ "# 3. Testowanie akceptacyjne\n", - "## Cele testowania akcpetacyjnego\n", + "## Cele testowania akceptacyjnego\n", " * Sprawdzenie kompletności systemu i jego prawidłowego działania;\n", " * Sprawdzanie zgodności zachowania funkcjonalnego i niefunkcjonalnego systemu ze specyfikacją;\n", " * Spełnienie wymagań wynikających z obowiązujących przepisów prawa lub norm/standardów;\n", @@ -250,7 +246,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -262,7 +257,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -279,11 +273,10 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ - "## 3.3. Testowanie akceptacyjne zgodności z umową i zgodności z przepisami prawa!\n", + "## 3.3. Testowanie akceptacyjne zgodności z umową i zgodności z przepisami prawa\n", "**Testowanie zgodności z umową** to weryfikowanie zgodności działania z kryteriami akceptacji zapisanymi w umowie. \n", "\n", "**Testowanie zgodności z przepisami prawa** sprawdza zgodność działania z ustawami, rozporządzeniami czy normami bezpieczeństwa. \n", @@ -291,20 +284,6 @@ ] }, { - "attachments": {}, - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## 3.4. Testy alfa i testy beta\n", - "**Testowanie alfa** jest wykonywane w siedzibie wykonawcy.\n", - " * Wykonują je potencjalni lub obecni klienci, i/lub operatorzy bądź niezależni testerzy. \n", - " \n", - "**Testowanie beta** wykonują obecni lub potencjalni klienci we własnych lokalizacjach. \n", - " * Celem może być wykrywanie błędów związanych z warunkami i środowiskiem (środowiskami), w których system będzie używany." - ] - }, - { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -316,7 +295,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -351,7 +329,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -366,7 +343,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -377,7 +353,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -395,7 +370,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -412,7 +386,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -421,7 +394,6 @@ ] }, { - "attachments": {}, "cell_type": "markdown", "metadata": {}, "source": [ @@ -432,13 +404,6 @@ " * ale oszczędza czas samego procesu testowania.\n", " * Niezależnie od typu testowania, jest to czynność, którą należy starannie zaplanować." ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": {}, - "outputs": [], - "source": [] } ], "metadata": { diff --git a/materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb b/materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb index 28cb6c0..a2ecd97 100644 --- a/materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb +++ b/materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb @@ -14,6 +14,13 @@ "![Logo 2](https://git.wmi.amu.edu.pl/AITech/Szablon/raw/branch/master/Logotyp_AITech2.jpg)" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 1. Pojęcie użyteczności" + ] + }, { "cell_type": "markdown", "metadata": {}, @@ -22,7 +29,7 @@ " \n", "

Użyteczność

\n", "\n", - "Użyteczność narzędzia: łatwość, z jaką ludzie potrafią korzystać z pewnego narzędzia w celu osiągnięcia określonego celu.\n", + "Użyteczność narzędzia: łatwość, z jaką ludzie potrafią korzystać z tego narzędzia w celu osiągnięcia określonego celu.\n", "\n", "

Cechy aplikacji użytecznej

\n", " \n", @@ -36,6 +43,63 @@ "
" ] }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 2. Wskazówki do tworzenia użytecznej aplikacji" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 2.1. Klasyka w oparciu o \"Don't make me think\"" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "
\n", + " \n", + "Przeczytaj w Internecie\n", + "\n", + "
    \n", + " \n", + "
  1. Usability Means…
    2. \n", + "\n", + "
  2. Web applications should explain themselves.
    3. \n", + "\n", + "
  3. Don’t Make Me Think
    4. \n", + "\n", + "
  4. Don’t waste my time
    5. \n", + " \n", + "
  5. Users still cling to their back buttons
    6. \n", + "\n", + "
  6. We’re creatures of habit
    7. \n", + "\n", + "
  7. No Time for Small Talk
    8. \n", + "\n", + "
  8. Don’t lose search
    9. \n", + "\n", + "
  9. We form mental site-maps
    10. \n", + "\n", + "
  10. Make it easy to go home
    11. \n", + " \n", + "
\n", + "\n", + "
\n" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 2.2. Podejście (bardziej) współczesne" + ] + }, { "cell_type": "markdown", "metadata": {}, @@ -74,16 +138,388 @@ "cell_type": "markdown", "metadata": {}, "source": [ - "## Użyteczność portali internetowych\n", - "### 10 heurystyk Jakoba Nielsena i Rolfa Molicha\n", - "### Zasady dobrej nawigacji" + "## 3. Zasady dobrej nawigacji na portalu internetowym\n", + "### 3.1. Pojęcie nawigacji" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "
\n", + " \n", + " Nawigacja to stały, niezmieniający się zestaw elementów w serwisie ułatwiający poruszanie się na niej.\n", + " \n", + "Najczęściej stosowanymi elementami nawigacji są: \n", + "
    \n", + "
  • Menu główne
    • \n", + "
  • Menu narzędziowe
    • \n", + "
  • Identyfikator witryny
    • \n", + "
  • Wyszukiwarka
    • \n", + "
  • Odsyłacz do strony startowej (zawarty w logo)
    • \n", + "
  • Flagi narodowe (przełączenie języków)
    • \n", + "
\n", + "\n", + "
" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ - "## Tworzenie raportu użyteczności" + "## 3.2. Cechy dobrej nawigacji" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + " * Szybkie przechodzenie po różnych elementach serwisu.\n", + " * Łatwe prowadzenie użytkownika do poszukiwanej informacji. \n", + " * Klarowność: użytkownik wie gdzie jest, gdzie może się skierować, jak wrócić, a także posiada informacje o odwiedzonych miejscach. \n", + " * Oszczędność: główne menu witryny nie powinno zawierać zbyt wielu elementów (między 5 a 9)" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 3.3. Zasady użytecznej nawigacji" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 1. Widoczność\n", + "Wszystkie elementy nawigacji muszą być bardzo dobrze widoczne na każdej stronie i podstronie serwisu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 2. Przewidywalność\n", + " * Nazwy elementów menu powinny pozwalać na przewidzenie zawartości\n", + " * Elementy menu powinny informować użytkownika o całej zawartości witryny.\n", + " * Odwiedzone linki powinny być oznaczone innym kolorem niż nieodwiedzone. " + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 3. Łatwość orientacji w strukturze serwisu\n", + "* Powinno się stosować różne style wyróżnienia jego elementów:\n", + " * dla całej kategorii, na której aktualnie znajduje się kursor (np. Aktualności),\n", + " * dla pozycji w menu, z której aktualnie korzysta użytkownik (np. Publikacje zagraniczne),\n", + " * dla pozostałych elementów serwisu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 4. Zasada odwróconej piramidy\n", + " * Na najwyższym poziomie należy umieścić kategorie najbardziej ogólne, a następnie przechodzić do podziału bardziej szczegółowego. \n", + " * Na tym samym poziomie powinny znajdować się kategorie o tym samym stopniu szczegółowości." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 5. Właściwe nazewnictwo\n", + " * Wykluczający podział etykiet menu: \n", + " * dana pozycja w menu może należeć tylko do jednej kategorii.\n", + " * Proste nazewnictwo: \n", + " * etykiety powinno formułować się w języku zrozumiałym dla użytkownika,\n", + " * powinno unikać się specjalistycznego słownictwa.\n", + " * Unikalne nazwy: \n", + " * dana nazwa powinna pojawiać się w serwisie internetowym nie więcej niż raz,\n", + " * każda strona powinna mieć swoja nazwę.\n", + " * Nazwa strony musi być dobrze widoczna:\n", + " * nazwa strony musi być w dobrze umiejscowiona i wyróżniona za pomocą rozmiaru i koloru czcionki.\n", + " * Nazwa strony lub podstrony musi być zgodna z nazwą odsyłacza, który do niej prowadzi." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Zasada 6. Spójność w wyglądzie i działaniu elementów nawigacyjnych\n", + "* Należy stosować te same konwencje w obrębie całego menu. \n", + "* Elementy pierwszego poziomu powinny pozostawać niezmienne w trakcie korzystania z całego serwisu internetowego. \n", + "* Wszystkie pozycje w menu powinny funkcjonować na tej samej zasadzie. \n", + "* Przy formułowaniu nazw w menu należy w każdym przypadku stosować tę samą formę gramatyczną.\n", + "* Pozycje menu należące do jednego poziomu powinny być sformatowane w jednym stylu." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# 4. Metody badania użyteczności" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 4.1. Automatyczne metody badania użyteczności" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Badanie współczynnika konwersji\n", + "**Współczynnik konwersji** wskazuje, jaka część internautów odwiedzających daną stronę dokonała pożądanej akcji np.\n", + " * Dokonała zakupu\n", + " * Wypełniła formularz\n", + " * Wysłała maila na wskazany adres\n", + " * Zarejestrowała się do systemu\n", + " * Pobrała software" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Testy A/B (testy porównawcze)\n", + "* Metoda polega na porównaniu dwóch wersji tej samej aplikacji.\n", + "* Najczęściej stosowana jest do stron internetowych.\n", + "* Różnicę (postęp lub regres) między wersjami wyznacza się poprzez porównanie wartości pewnej miary, np. współczynnika konwersji dla stron internetowych. \n", + "\n", + "[Przeczytaj w Internecie](https://www.optimizely.com/ab-testing/)" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Analityka ruchu na portalu internetowym\n", + "Metoda polega na obserwacji dotyczących ruchu na witrynie, takich jak:\n", + " * Wskaźnik odrzuceń – procentowa wartość osób, które opuściły stronę wejściową serwisu bez wykonania żadnej akcji\n", + " * Wskaźnik porzuceń – wskaźnik analogiczny dla podstron danego serwisu,\n", + "Metoda wskazuje działania użytkownika – nie wskazuje jego przyczyn. \n", + "\n", + "Przykładowa witryna: \n", + "https://www.google.com/analytics/" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Click-tracking\n", + "\n", + "Metoda dostarcza informacji o poszczególnych elementach strony za pomocą następujących typów informacji\n", + " * Heat maps. \n", + " * Wskazują, w jakie miejsca na stronie ludzie klikają (see what’s hot and what’s not).\n", + " * Confetti\n", + " * Analiza kliknięć: jak klikały poszczególne grupy użytkowników i w poszukiwaniu czego.\n", + " * Scrollmap\n", + " * Analiza, jak daleko w dół strony użytkownicy przewijają stronę – pozwala przeanalizować miejsca, w których strona jest najczęściej porzucana.\n", + " * Overlay report\n", + " * Liczba kliknięć na poszczególne elementy strony.\n", + "\n", + "Przykładowy dostawca: \n", + "http://www.crazyegg.com" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Analiza kontrastu\n", + "\n", + "Dostarcza informacji o kontraście pomiędzy elementami strony, co jest szczególnie istotne dla osób z upośledzeniem wzroku.\n", + "\n", + "* Przykładowy adres\n", + " * https://webaim.org/resources/contrastchecker/\n", + " * Można wpisać adres strony, która ma zostać przeanalizowana pod względem kontrastu – otrzymuje się pełen raport." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 4.2. Metody z udziałem użytkowników\n", + "\n", + "W metodach z udziałem użytkowników można posłużyć się zastosowaniem *persony*, w celu optymalizacji kosztów badania.\n", + " * **Persona** to fikcyjna postać stworzona by reprezentować typy użytkowników (demograficzne i technograficzne).\n", + " * Persony to inaczej archetypy grup użytkowników i ich potrzeb. Dzięki personom cała populacja docelowa reprezentowana jest przez kilka konceptów.\n", + " > Przykład persony: Jan Kowalski, lat 37, elektryk, mieszkaniec Ząbkowic Śląskich\n", + " \n", + " Przykładowy proces testowania użyteczności z udziałem użytkowników:\n", + " 1. Określ grupy użytkowników np. przy użyciu persony (co najmniej jedna persona na grupę).\n", + " 2. Dla każdej persony utwórz potencjalny scenariusz użycia – w jaki sposób dana persona chce korzystać z systemu.\n", + " 3. Dla każdej persony zorganizuj użytkowników reprezentatywnych (minimum jednego użytkownika dla persony).\n", + " 4. Poproś ich o wykonanie zadań charakterystycznych dla danej persony.\n", + " 5. Obserwuj lub nagrywaj działania użytkowników: gdzie im się powodzi, a gdzie mają trudności.\n", + " 6. Potencjalnie poproś użytkowników o wypełnienie ankiet.\n", + "\n", + "Wyróżniamy następujące typy metod z udziałem użytkowników:\n", + " * podgląd sesji użytkowników.\n", + " * obserwacja użytkownika,\n", + " * metoda wywiadu." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Podgląd sesji użytkowników\n", + "* Działalność użytkownika jest „nagrywana”.\n", + "* Autor oprogramowania może odtworzyć działania użytkownika z perspektywy użytkownika.\n", + "* Każde kliknięcie, poruszenie myszą, przesunięcie kursora zostaje zapisane." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Obserwacja użytkownika\n", + "* Działalność użytkownika jest obserwowana.\n", + "* Obserwator zapisuje poczynania użytkownika.\n", + "* Obserwacje są analizowane w celu ulepszenia użyteczności aplikacji." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Metoda wywiadu\n", + " * Sposoby przeprowadzenia wywiadu:\n", + " * Analiza celów użytkowników i wykonywania przez nich zadań,\n", + " * Dyskusja prowadzona przez moderatora,\n", + " * Wypełnienie ankiet / kwestionariuszy." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.2. Metodologia badania\n", + "Opis tej części zależy od przejętej metody badania. Przykładowo, dla metody wywiadu część ta może mieć następującą postać:\n", + "\n", + "### 5.2.1. Zakres badania\n", + " * Określenie zakresu projektowego: badanie gotowego produktu, czy ocena prototypu,\n", + " * Określenie celu, np., wskazanie wyłącznie błędów w systemie, czy również wskazanie proponowanych ulepszeń,\n", + " * Określenie zastosowanej metody badania użyteczności.\n", + "\n", + "### 5.2.2. Profile użytkowników\n", + " * Określenie kilku segmentów odbiorców pod względem:\n", + " * Danych demograficznych\n", + " * Doświadczenia z programami podobnymi (wcześniejszymi wersjami systemu)\n", + " * Oczekiwań względem systemu\n", + "\n", + "### 5.2.3. Grupa badawcza\n", + " * Określenie liczebności grupy badawczej (około 5 osób)\n", + " * Określenie charakterystyki grupy badawczej pod względem różnych kryteriów , np.\n", + " * płeć, \n", + " * wiek, \n", + " * miejsce zamieszkania, \n", + " * wykształcenie, \n", + " * zawód, \n", + " * wielkość firmy, \n", + " * branża, \n", + " * obsługa komputera, \n", + " * doświadczenie z podobnymi programami, itp.\n", + " * Liczebność i charakterystykę grupy badawczej można zobrazować za pomocą wykresów.\n", + "\n", + "### 5.2.4. Scenariusz badania\n", + "W tej części należy opisać, jak będzie przebiegać scenariusz badania.\n", + "Przykładowy scenariusz badania w metodzie wywiadu:\n", + "1. Omówienie zadań i sposobu wypełniania kwestionariusza\n", + "2. Podanie informacji o regulaminie przeprowadzenia testu wykonania zadań\n", + "3. Test wykonania zadań\n", + "4. Wypełnienie przygotowanego kwestionariusza przez użytkowników\n", + "\n", + "### 5.2.5. Lista zadań do wykonania przez użytkowników\n", + "W tej częścI dla każdego zadania należy podać kryterium pomyślnego ukończenia zadania. Lista zadań może być podana w postaci tabelki:\n", + " * Opis zadania\n", + " * Kryterium ukończenia zadania\n", + "\n", + "### 5.2.6. Ocena wykonania zadań \n", + "W tej części należy ocenić, jak badani wykonali zadania.\n", + "Przykładowa ocena wykonania zadań:\n", + " * Liczba błędów krytycznych użytkownika\n", + " * Liczba błędów niekrytycznych użytkownika\n", + " * Liczba zadań wykonanych zgodnie z założeniami\n", + " * Liczba zdań niewykonanych zgodnie z założeniami\n", + " * Czas wykonania zadań\n", + "\n", + "Ten etap raportu można zakończyć wykresami." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.3. Obszary problemowe\n", + "Obszary problemowe to **wnioski** z badania użyteczności.\n", + " * W tej częśći raportu określone zostają obszary problemowe (składowe systemu, które sprawiają kłopoty).\n", + " * Dla każdego obszaru problemowego określa się zestaw problemów użytkowania.\n", + " * Problem użytkowania składa się z:\n", + " * Tytułu problemu,\n", + " * Opisu problemu,\n", + " * Jeśli problemem jest zbyt długi czas wykonania zadania, to można podać średnie czasy rozwiązania,\n", + " * Filmiku wideo (jeśli takim dysponujemy),\n", + " * Rekomendacji rozwiązania problemu,\n", + " * Opisu proponowanego scenariusza działania użytkownika po rozwiązaniu problemu." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 5.4. Dodatki\n", + "W tej części raportu składamy materiały pomocnicze, np.\n", + " ### 5.4.1. Ankieta\n", + "\n", + "W ankiecie mogą znaleźć się przykładowe pytania:\n", + " * Jak ocenia Pan/Pani trudność poszczególnych zadań?\n", + " * Co sprawiło Panu/Pani największy problem podczas testów?\n", + " * Jakie inne funkcjonalności byłyby pożyteczne (wskazać listę do wyboru)?\n", + " * Jakie elementy systemu były niezrozumiałe?\n", + "\n", + " Wyniki ankiety potestowej możemy przedstawić na wykresach.\n", + " \n", + "### 5.4.2. Inne materiały pomocnicze\n", + "Przykładowe materiały pomocnicze:\n", + " * Lista filmów video ilustrujących błędy użyteczności aplikacji,\n", + " * Wnioski i rekomendacje ekspertów użyteczności,\n", + " * Inne materiały w zależności od zastosowanej metody badawczej." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "# Podsumowanie wykładu\n", + "1. Tworząc aplikację, myśl przede wszystkim o jej użyteczności, a potem dopiero o jej funkcjonalności.\n", + "2. O sukcesie aplikacji stanowi pomysł, a nie wielość funkcji.\n", + "3. Zawsze (!) pamiętaj o wskazówkach użyteczności.\n", + "4. Tworząc portal internetowy, stosuj zasady dobrej nawigacji.\n", + "5. Przekonaj się, jak Twój program jest używany – wykonaj badanie użyteczności." ] } ],