SysInf/materiały na wykład/11_wybrane_zagadnienia_użyteczności.ipynb

{
 "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> Systemy informatyczne</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\""
   ]
  },
  {
   "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": {},
   "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"
   ]
  },
  {
   "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"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Zasada 1. Widoczność\n",
    "Wszystkie elementy nawigacji muszą być bardzo dobrze widoczne na każdej stronie i podstronie serwisu."
   ]
  },
  {
   "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. "
   ]
  },
  {
   "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."
   ]
  },
  {
   "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."
   ]
  },
  {
   "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."
   ]
  },
  {
   "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"
   ]
  },
  {
   "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/)"
   ]
  },
  {
   "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/"
   ]
  },
  {
   "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"
   ]
  },
  {
   "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."
   ]
  },
  {
   "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"
   ]
  },
  {
   "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": "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."
   ]
  },
  {
   "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."
   ]
  },
  {
   "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.7.6"
  },
  "subtitle": "10. Wybrane zagadnienia użyteczności[wykład]",
  "title": "Przygotowanie do projektu badawczo-rozwojowego",
  "year": "2021"
 },
 "nbformat": 4,
 "nbformat_minor": 4
}