aitech-pbr-pilka/materiały na PPB (wykład)/10_wybrane_zagadnienia_użyteczności.ipynb

586 lines
22 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"![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> 10. <i>Wybrane zagadnienia użyteczności</i>[wykład]</h2> \n",
"<h3>Krzysztof Jassem (2021)</h3>\n",
"</div>\n",
"\n",
"![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": {},
"source": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<h3>Użyteczność</h3> \n",
"\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",
"<ul>\n",
"<li> Łatwa do nauki: Jak łatwo jest użytkownikom wykonać dane zadanie po raz pierwszy?\n",
"<li> Wydajna w pracy: Jak szybko użytkownicy wykonują zadania, gdy już się nauczyli programu?\n",
"<li> Satysfakcja: Czy korzystanie z programu daje satysfakcję?\n",
"<li> Odporna na błędy: Ile błędów robią użytkownicy, jak poważne są to błędy i jak łatwo z nich się wydostać?\n",
"<li> Zapamiętywalna po czasie: Jak łatwo powrócić do biegłości użytkowania po pewnym okresie nieużytkowania programu?\n",
"\n",
"</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>Dont Make Me Think </li>\n",
"\n",
"<li>Dont waste my time </li>\n",
" \n",
"<li> Users still cling to their back buttons </li>\n",
"\n",
"<li> Were creatures of habit </li>\n",
"\n",
"<li> No Time for Small Talk </li>\n",
"\n",
"<li> Dont 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": {},
"source": [
"<div class=\"alert alert-block alert-success\">\n",
" \n",
"<h3>Wskazówki do tworzenia użytecznego systemu informatycznego</h3> \n",
"\n",
"<ol>\n",
"<li> Autorze: Poznaj użytkownika, a TY nie jesteś użytkownikiem. </li> \n",
" <li> Użytkownik powinien mieć kontrolę nad systemem, a nie odwrotnie: to użytkownik jest szefem i system powinien to okazywać. </li> \n",
" <li> System musi ułatwiać użytkownikowi życie:</li>\n",
" <ul>\n",
" <li> Elementy, które wyglądają tak samo, powinny działać tak samo, a akcje, które nie działają tak samo powinny być inaczej reprezentowane. </li>\n",
" <li> Każda akcja użytkownika powinna mieć reakcję programu. </li>\n",
" <li> Kiedy użytkownik ma do podjęcia decyzję, system podaje mu całą dostępną informację. </li>\n",
" </ul> \n",
" <li> System musi być \"idioto-odporny\": </li>\n",
" <ul>\n",
" <li> Każdy robi błędy, więc każdy błąd powinien dać się naprawić. </li>\n",
" <li> Gdy użytkownik zrobi błąd, System daje mu o tym znać, zanim … wpadnie w PRAWDZIWE kłopoty. </li>\n",
" <li> Informacje o błędach powinny być zrozumiałe dla użytkownika i mówić mu, jak naprawić problem. </li>\n",
" </ul> \n",
" <li> Wczuj się w użytkownika </li>\n",
" <ul>\n",
" <li> Eliminuj niepotrzebne decyzje (nie pytaj, jak nie musisz). </li>\n",
" <li> Im mniej kroków do celu, tym lepiej.</li> \n",
" <li> Użytkownik powinien zawsze móc dowiedzieć się, co robić dalej. </li>\n",
" <li> Użytkownik powinien zawsze wiedzieć, co się dzieje.\n",
" </ul>\n",
" </ol>\n",
"</div>"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 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": [
"## 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 whats hot and whats 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."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# 5. Raport badania użyteczności\n",
"Raport badania użyteczności to sprawozdanie z badania użyteczności aplikacji, w którym wskazuje się **obszary problemowe**.\n",
"Przykładowo raport użytecznści może składać się z następujących części:\n",
"1. Informacje wstępne\n",
"2. Metodologia badania\n",
"3. Obszary problemowe\n",
"4. Dodatki"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## 5.1. Informacje wstępne\n",
"Ta część zawiera ogólne informacje o prowadzonym badaniu, np. :\n",
" * Daty tworzenia raportu\n",
" * Harmonogram prowadzenia badań\n",
" * Odwołanie do standardów badania użyteczności\n",
" * Autorzy raportu"
]
},
{
"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."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
},
{
"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."
]
}
],
"metadata": {
"author": "Krzysztof Jassem",
"email": "jassem@amu.edu.pl",
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"lang": "pl",
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.5"
},
"subtitle": "10. Wybrane zagadnienia użyteczności[wykład]",
"title": "Przygotowanie do projektu badawczo-rozwojowego",
"year": "2021"
},
"nbformat": 4,
"nbformat_minor": 4
}