pilka/aitech-pbr-pilka
1
0
Fork 0
forked from AITech/aitech-ppb-pbr
Code Issues Pull Requests Projects Releases Wiki Activity

wykład 10 o podstawach użyteczności

Browse Source
This commit is contained in:
Krzysztof Jassem 2021-11-26 12:35:01 +01:00
parent 6c124356ea
commit d8b214591a
6 changed files with 892 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
materiały na PBR (laboratorium)/06_prototypowanie_i_ciągła_integracja_lab.ipynb
View File

@ -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."
]

0
materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_integracyjne_i_systemowe-checkpoint.ipynb → materiały na PPB (wykład)/.ipynb_checkpoints/09_testowanie_systemowe_i_akceptacyjne-checkpoint.ipynb
View File

446
materiały na PPB (wykład)/.ipynb_checkpoints/10_wybrane_zagadnienia_użyteczności-checkpoint.ipynb
View File

@ -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",
"<h3>Użyteczność</h3> \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",
"<h3> Cechy aplikacji użytecznej </h3>\n",
" \n",
@ -36,6 +43,63 @@
"</div>"
]
},
{
"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": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<a href=\"https://www.uxbooth.com/articles/10-usability-lessons-from-steve-krugs-dont-make-me-think/\">Przeczytaj w Internecie</a>\n",
"\n",
"<ol> \n",
" \n",
"<li> Usability Means… </li>\n",
"\n",
"<li>Web applications should explain themselves. </li>\n",
"\n",
"<li>Don’t Make Me Think </li>\n",
"\n",
"<li>Don’t waste my time </li>\n",
" \n",
"<li> Users still cling to their back buttons </li>\n",
"\n",
"<li> We’re creatures of habit </li>\n",
"\n",
"<li> No Time for Small Talk </li>\n",
"\n",
"<li> Don’t lose search </li>\n",
"\n",
"<li> We form mental site-maps </li>\n",
"\n",
"<li> Make it easy to go home </li>\n",
" \n",
"</ol>\n",
"\n",
"<div>\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": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<b> Nawigacja </b> 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",
"<ul>\n",
"<li> Menu główne </li>\n",
"<li> Menu narzędziowe </li>\n",
"<li> Identyfikator witryny </li>\n",
"<li> Wyszukiwarka </li>\n",
"<li> Odsyłacz do strony startowej (zawarty w logo) </li>\n",
"<li> Flagi narodowe (przełączenie języków) </li>\n",
"</ul>\n",
"\n",
"</div>"
]
},
{
"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."
]
}
],

2
materiały na PPB (wykład)/06_prototypowanie i ciągła integracja.ipynb
View File

@ -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",

49
materiały na PPB (wykład)/09_testowanie_integracyjne_i_systemowe.ipynb → materiały na PPB (wykład)/09_testowanie_systemowe_i_akceptacyjne.ipynb
View File

@ -7,7 +7,7 @@
"![Logo 1](https://git.wmi.amu.edu.pl/AITech/Szablon/raw/branch/master/Logotyp_AITech1.jpg)\n",
"<div class=\"alert alert-block alert-info\">\n",
"<h1> Przygotowanie do projektu badawczo-rozwojowego</h1>\n",
"<h2> 9. <i>Testowanie systemowe i adaptacyjne</i>[wykład]</h2> \n",
"<h2> 9. <i>Testowanie systemowe i akceptacyjne</i>[wykład]</h2> \n",
"<h3>Krzysztof Jassem (2021)</h3>\n",
"</div>\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": [
"<div class=\"alert alert-block alert-success\">\n",
"<h3>Testowanie adaptacyjne</h3>\n",
"<h3>Testowanie akceptacyjne</h3>\n",
" \n",
"Przedmiotem <b>testowania adaptacyjnego </b> jest oprogramowanie stanowiące przedmiot dostawy do użytkownika w docelowym środowisku pracy.\n",
"Przedmiotem <b>testowania akceptacyjnego </b> 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",
"</div>"
@ -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",
"<img src=\"obrazy/sanity test.png\" alt=\"Przykład testów zdroworozsądkowych\" width=900px>"
]
},
@ -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": {

446
materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb
View File

@ -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",
"<h3>Użyteczność</h3> \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",
"<h3> Cechy aplikacji użytecznej </h3>\n",
" \n",
@ -36,6 +43,63 @@
"</div>"
]
},
{
"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": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<a href=\"https://www.uxbooth.com/articles/10-usability-lessons-from-steve-krugs-dont-make-me-think/\">Przeczytaj w Internecie</a>\n",
"\n",
"<ol> \n",
" \n",
"<li> Usability Means… </li>\n",
"\n",
"<li>Web applications should explain themselves. </li>\n",
"\n",
"<li>Don’t Make Me Think </li>\n",
"\n",
"<li>Don’t waste my time </li>\n",
" \n",
"<li> Users still cling to their back buttons </li>\n",
"\n",
"<li> We’re creatures of habit </li>\n",
"\n",
"<li> No Time for Small Talk </li>\n",
"\n",
"<li> Don’t lose search </li>\n",
"\n",
"<li> We form mental site-maps </li>\n",
"\n",
"<li> Make it easy to go home </li>\n",
" \n",
"</ol>\n",
"\n",
"<div>\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": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<b> Nawigacja </b> 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",
"<ul>\n",
"<li> Menu główne </li>\n",
"<li> Menu narzędziowe </li>\n",
"<li> Identyfikator witryny </li>\n",
"<li> Wyszukiwarka </li>\n",
"<li> Odsyłacz do strony startowej (zawarty w logo) </li>\n",
"<li> Flagi narodowe (przełączenie języków) </li>\n",
"</ul>\n",
"\n",
"</div>"
]
},
{
"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."
]
}
],