Programowanie w środowiskach graficznych Wykład 2: Psychologia poznawcza ludzi i komputerów Zasady projektowania interfejsów użytkownika Standardy i wskazówki (guidelines) Komputer nie myśli jak człowiek, Ale człowiek nie potrafi robić rzeczy, które komputer w krótkim czasie czyni doskonale. Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Plan wykładu Psychologia użytkowników Percepcja i przetwarzanie informacji rodzaje pamięci u człowieka Współpraca ludzi i komputerów Zasady projektowania interfejsu Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników Doświadczenia i przyzwyczajenia Psychologia kognitywna percepcja nauka pamięć Procesy nauki i przyswajania nauka interfejsu Rola psychologii - musimy się podporządkować, bo to, co na ekranie, musi trafić do użytkownika! Psychologia ludzi i komputerów jest na tyle podobna, że mogą razem pracować, na tyle jednak odmienna, że niezbędny jest interfejs! Interfejs powinien bazować na wiedzy i oczekiwaniach użytkowników. Wyświetlanie komunikatów - nie mogą znikać za szybko, musimy mieć czas by je przeczytać - może i klika razy. Percepcja, to nie tylko to co widzimy, ale również to co odbieramy innymi zmysłami. UWAGA:Cocktail-party – podświadome monitorowanie otaczającego nas świata. – wychwycenie brzmienia naszego imienia - dobrze znany przedmiot położony nie na tym miejscu. Naszą uwagę skupia nie tylko nagła zmian otoczenia, ale również zmiana znacząca dla naszego indywidualnego systemu percepcji. WNIOSKI: Przetwarzamy straszne ilości informacji nawet o tym nie wiedząc, nadmiar nam przeszkadza - nawet, jeśli o tym nie mamy pojęcia (vide: muzyka oraz MessageBeep). Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników Percepcja konfrontacja świeżych doświadczeń ze starymi doświadczeniami i oczekiwaniami kombinacja danych wejściowych i zapamiętanej wiedzy Czas reakcji człowiek – komputer Rola psychologii - musimy się podporządkować, bo to, co na ekranie, musi trafić do użytkownika! Psychologia ludzi i komputerów jest na tyle podobna, że mogą razem pracować, na tyle jednak odmienna, że niezbędny jest interfejs! Interfejs powinien bazować na wiedzy i oczekiwaniach użytkowników. Wyświetlanie komunikatów - nie mogą znikać za szybko, musimy mieć czas by je przeczytać - może i klika razy. Percepcja, to nie tylko to co widzimy, ale również to co odbieramy innymi zmysłami. UWAGA:Cocktail-party – podświadome monitorowanie otaczającego nas świata. – wychwycenie brzmienia naszego imienia - dobrze znany przedmiot położony nie na tym miejscu. Naszą uwagę skupia nie tylko nagła zmian otoczenia, ale również zmiana znacząca dla naszego indywidualnego systemu percepcji. WNIOSKI: Przetwarzamy straszne ilości informacji nawet o tym nie wiedząc, nadmiar nam przeszkadza - nawet, jeśli o tym nie mamy pojęcia (vide: muzyka oraz MessageBeep). Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników Przetwarzane informacje obraz dźwięk pozostałe zmysły Uwaga ciągłe przetwarzanie danych, często bez naszej wiedzy Rola psychologii - musimy się podporządkować, bo to, co na ekranie, musi trafić do użytkownika! Psychologia ludzi i komputerów jest na tyle podobna, że mogą razem pracować, na tyle jednak odmienna, że niezbędny jest interfejs! Interfejs powinien bazować na wiedzy i oczekiwaniach użytkowników. Wyświetlanie komunikatów - nie mogą znikać za szybko, musimy mieć czas by je przeczytać - może i klika razy. Percepcja, to nie tylko to co widzimy, ale również to co odbieramy innymi zmysłami. UWAGA:Cocktail-party – podświadome monitorowanie otaczającego nas świata. – wychwycenie brzmienia naszego imienia - dobrze znany przedmiot położony nie na tym miejscu. Naszą uwagę skupia nie tylko nagła zmian otoczenia, ale również zmiana znacząca dla naszego indywidualnego systemu percepcji. WNIOSKI: Przetwarzamy straszne ilości informacji nawet o tym nie wiedząc, nadmiar nam przeszkadza - nawet, jeśli o tym nie mamy pojęcia (vide: muzyka oraz MessageBeep). Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Test percepcji A |3 C Mayhew 1992 13 przypomina „przełamane” B Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Test percepcji |2 |3 |4 Mayhew 1992 13 przypomina „przełamane” B Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Test percepcji A |2 |3 |4 C B Mayhew 1992 13 przypomina „przełamane” B Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników: Pamięć robocza Chwilowy bufor Podświadomość Zdarzenia, zmiany Niski stopień kojarzenia Wysoki stopień czujności Aktywność dyktowana przez warunki Pamięć robocza - chwilowy bufor dla danych wejściowych, poniżej progu świadomości. Wstępne przetwarzanie, dostrzeganie, wykrywanie zmian. Przetwarzanie niezbyt skomplikowane (inteligentne), za to stale aktywne. Mimo niezłej pojemności napływ informacji b. duży (klatki filmu) - krótki czas przechowywania. UWAGA! To przetwarzania ma właściwość przyzwyczajania się! Podatne na zmęczenie, generuje przeoczenia! Nadmiar powoduje niepotrzebną aktywność - przykład: animowane tło KEY IDEA: zostaw informacje na tak długo na ekranie, by mogły przejść przez p.r. i puść dalej! GUI to nie film! Pamięć krótkotrwała (cache)- 6 * 538 - główne miejsce świadomego przetwarzania - myślenia. Przechowuje inf. przez ok. 30 sekund. (do wyćwiczenia) Pobiera informacje z obu sąsiednich warstw, ale stanowi wąskie gardło! Nie obciążać niepotrzebnie! Przykład szukanie numeru w książce telefonicznej. Zapomnimy go przechodza do przedpokoju gdzie jest aparat. Komputer zapamięta to łatwiej (przykład: zapamiętywanie między ekranami). (przykład: helpem nie zasłaniaj tego, co się dzieje!) Użytkownik musi widzieć obie rzeczy naraz!! Pamięć długotrwała (książka telefoniczna) – problem: nie jak pojemna, lecz jak szybko dostać się do informacji . Posiadanie informacji „na końcu języka”) Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników: Pamięć krótkotrwała Świadome przetwarzanie Myślenie Czas – około 30s Liczba elementów 7±2 Powtarzanie i „grupowanie” Wąskie gardło Pamięć robocza - chwilowy bufor dla danych wejściowych, poniżej progu świadomości. Wstępne przetwarzanie, dostrzeganie, wykrywanie zmian. Przetwarzanie niezbyt skomplikowane (inteligentne), za to stale aktywne. Mimo niezłej pojemności napływ informacji b. duży (klatki filmu) - krótki czas przechowywania. UWAGA! To przetwarzania ma właściwość przyzwyczajania się! Podatne na zmęczenie, generuje przeoczenia! Nadmiar powoduje niepotrzebną aktywność - przykład: animowane tło KEY IDEA: zostaw informacje na tak długo na ekranie, by mogły przejść przez p.r. i puść dalej! GUI to nie film! Pamięć krótkotrwała (cache)- 6 * 538 - główne miejsce świadomego przetwarzania - myślenia. Przechowuje inf. przez ok. 30 sekund. (do wyćwiczenia) Pobiera informacje z obu sąsiednich warstw, ale stanowi wąskie gardło! Nie obciążać niepotrzebnie! Przykład szukanie numeru w książce telefonicznej. Zapomnimy go przechodza do przedpokoju gdzie jest aparat. Komputer zapamięta to łatwiej (przykład: zapamiętywanie między ekranami). (przykład: helpem nie zasłaniaj tego, co się dzieje!) Użytkownik musi widzieć obie rzeczy naraz!! Pamięć długotrwała (książka telefoniczna) – problem: nie jak pojemna, lecz jak szybko dostać się do informacji . Posiadanie informacji „na końcu języka”) Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników: Pamięć długotrwała Bardzo duża pojemność Problem dostępu „Zapominanie” Wskazówki ułatwiające Zbiór dostępnych opcji Pamięć robocza - chwilowy bufor dla danych wejściowych, poniżej progu świadomości. Wstępne przetwarzanie, dostrzeganie, wykrywanie zmian. Przetwarzanie niezbyt skomplikowane (inteligentne), za to stale aktywne. Mimo niezłej pojemności napływ informacji b. duży (klatki filmu) - krótki czas przechowywania. UWAGA! To przetwarzania ma właściwość przyzwyczajania się! Podatne na zmęczenie, generuje przeoczenia! Nadmiar powoduje niepotrzebną aktywność - przykład: animowane tło KEY IDEA: zostaw informacje na tak długo na ekranie, by mogły przejść przez p.r. i puść dalej! GUI to nie film! Pamięć krótkotrwała (cache)- 6 * 538 - główne miejsce świadomego przetwarzania - myślenia. Przechowuje inf. przez ok. 30 sekund. (do wyćwiczenia) Pobiera informacje z obu sąsiednich warstw, ale stanowi wąskie gardło! Nie obciążać niepotrzebnie! Przykład szukanie numeru w książce telefonicznej. Zapomnimy go przechodza do przedpokoju gdzie jest aparat. Komputer zapamięta to łatwiej (przykład: zapamiętywanie między ekranami). (przykład: helpem nie zasłaniaj tego, co się dzieje!) Użytkownik musi widzieć obie rzeczy naraz!! Pamięć długotrwała (książka telefoniczna) – problem: nie jak pojemna, lecz jak szybko dostać się do informacji . Posiadanie informacji „na końcu języka”) Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników: Pamięć i poznanie Pamięć robocza bufor bodźców zmysłowych do wstępnego przetwarzania PODATNA NA ZMĘCZENIE Pamięć krótkotrwała świadome przetwarzanie danych TYLKO 7±2 ELEMENTÓW DO 30 SEK. Pamięć długotrwała PODATNA NA ZAPOMINANIE TRUDNE ODTWARZANIE DANYCH Pamięć robocza - chwilowy bufor dla danych wejściowych, poniżej progu świadomości. Wstępne przetwarzanie, dostrzeganie, wykrywanie zmian. Przetwarzanie niezbyt skomplikowane (inteligentne), za to stale aktywne. Mimo niezłej pojemności napływ informacji b. duży (klatki filmu) - krótki czas przechowywania. UWAGA! To przetwarzania ma właściwość przyzwyczajania się! Podatne na zmęczenie, generuje przeoczenia! Nadmiar powoduje niepotrzebną aktywność - przykład: animowane tło KEY IDEA: zostaw informacje na tak długo na ekranie, by mogły przejść przez p.r. i puść dalej! GUI to nie film! Pamięć krótkotrwała (cache)- 6 * 538 - główne miejsce świadomego przetwarzania - myślenia. Przechowuje inf. przez ok. 30 sekund. (do wyćwiczenia) Pobiera informacje z obu sąsiednich warstw, ale stanowi wąskie gardło! Nie obciążać niepotrzebnie! Przykład szukanie numeru w książce telefonicznej. Zapomnimy go przechodza do przedpokoju gdzie jest aparat. Komputer zapamięta to łatwiej (przykład: zapamiętywanie między ekranami). (przykład: helpem nie zasłaniaj tego, co się dzieje!) Użytkownik musi widzieć obie rzeczy naraz!! Pamięć długotrwała (książka telefoniczna) – problem: nie jak pojemna, lecz jak szybko dostać się do informacji . Posiadanie informacji „na końcu języka”) Instytut Informatyki Politechniki Śląskiej

Psychologia użytkowników Techniki zapamiętywania powtarzanie kojarzenie Techniki odzyskiwania informacji przypominanie rozpoznawanie 10412 – pesel Kto pamięta skróty ctrl-c ctr-v, ctrl-insert i shift-insert. Dopiero zaawansowany użytkownik. Za notes z gotowymi wpisami służy nam opcja w menu – te skróty tam są podane. (slajd by się przydał) Instytut Informatyki Politechniki Śląskiej

Ludzie i komputery (wg Deborah Mayhew) Instytut Informatyki Politechniki Śląskiej

Zasady projektowania IU Nie rób drugiemu co Tobie nie miłe Adaptuj oprogramowanie do potrzeb użytkownika - a nie odwrotnie! Co się dalej wydarzy? - Cokolwiek Użytkownik zechce... Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej ZŁOTE ZASADY Poznaj użytkownika. Oddaj mu władzę! Minimalizuj konieczność zapamiętywania Zachowaj konsekwencję w projekcie Instytut Informatyki Politechniki Śląskiej

Cała władza w ręce użytkownika! Wyświetlaj znaczące komunikaty Pozwól używać albo myszki, albo klawiatury Pozwól użytkownikowi na przeskoki Twórz wyrozumiały interfejs Informuj, co się dzieje Nie przesadzaj z trybami pracy 1. Komunikaty powinny być w języku użytkownika i trafiać w sedno. Nie wiń użytkownika, pilnuj języka (nie waż się na błędy językowe!) 2. Wolność użytkownika, nie zapomnij też o skrótach! 3. Telefony dzwonią - więc nie trzymaj użytkownika przy klawiaturze. Niech sobie zapisze i przyjdzie później. Wizardy są fajne, ale nie mogą trzymać użytkownika żelazną ręką. 4. Wyrozumiały - (pol. popr.) idiotoodporny. Errare humanum est i nic na to nie poradzimy. Undo. 5. Ludzie lubią być informowani (przykład z liniami lotniczymi). Niezbędność informacji zwrotnej (feedback) typu --- udało się. Przykład: sekwencja del-dir. Przykład: oczekiwanie. 6. Tryby pracy są niezbędne (nie prowadźmy zaawasnowanego użytkownika drogą dla początkujących), ale mogą prowadzić do kłopotów - te same operacje wiodą do różnych reakcji programu - mało przewidywalne, mało wygodne. Tryb nie powinien ograniczać funkcjonalności (przykład: print preview są read-only). Instytut Informatyki Politechniki Śląskiej

Cała władza w ręce użytkownika - cd. Usprawniaj nawigację Uwzględniaj różne poziomy umiejętności Twórz przeźroczyste interfejsy Umożliwiaj dopasowanie Pozwalaj na bezpośrednią manipulację Spraw, by chociaż myśleli, że mają władzę... 1. Nawigacja jako jeden z najistotniejszych elementów. Informacja dla użytkownika: co jest dostępne w danej chwili. Menu, toolbary itp. Menu Start w Win95. Nawigacja w Internecie. Powinno to być łatwe, relaksujące i kształcące. 2. Nie ograniczaj żadnej grupy. Doświadczeni użytkownicy nie cierpią ścieżek dla nowicjuszy - wolą jednym kliknięciem znaleźć się od razu tam, gdzie chcą. 3. Interfejs powinien być przeźroczysty! Pracować z obiektami, a nie ich reprezentacjami. Użytkownik ma się koncentrować na pracy z realnymi obiektami, a nie tłumaczyć swoje zadania na funkcje udostępniane przez oprogramownie. Dokument a nie plik tekstowy. Zagadnienie koszy na śmieci (recycle bin). Crucial:Rozwijać pojęciowy model użytkownika, a nie programisty/projektanta. 4. Oczywiste, choć są 2 aspekty: - stosować ustawienia ogólnosystemowe - stosować wewnętrzną customisation w obrębie programu. 5. Drag & Drop. Niech będzie naturalne (przykład: śmieci automatycznie płonące w koszu na śmieci), --- poszerzaj metaforę ale jej nie psuj --- użytkowników nie zaskakuj. 6. Przykład z windą. Przykład w banku w Gandawie. Użytkownicy nie lubią nic nie robić i na nic nie patrzeć. Rozerwij ich, niech nie mają wrażenia, że są opuszczeni. Przykłady: kopiowanie w Win95, programy instalacyjne. Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Nie obciążać pamięci! Odciążaj pamięć krótkotrwałą Polegaj na rozpoznawaniu, nie przypominaniu Pokazuj wizualne wskazówki Stosuj wartości domyślne, pozwól cofać i powtarzać, 1. Chodzi o krótkie informacje, które się często wpisuje - i po co? Jak często użytkownik musi notować rzeczy na kartce lub je zapamiętywać? Operacje copy-paste. 2. Wszelkie listy, menu, tool-tips (podpowiedzi) (przykład: VC++ 6.0). Także wartości domyślne i historie. 3. Gdzie jestem, co robię, w jakim jestem trybie, co zrobiłem dotąd. Przykład: Word 97. Testowanie tego: podejść w środku zadania do komputera i powiedzieć wszystko! Także: previews 4. Niech komputer pamięta takie rzeczy. Wiąże się to też z historią (vide p. 2). Instytut Informatyki Politechniki Śląskiej

Nie obciążać pamięci! - cd. Stosuj składnię obiekt-polecenie Używaj metafor ze świata rzeczywistego Stosuj technikę kolejnych przybliżeń Twórz przejrzyste okna 1. Tak jak w popup-menu. Łatwość eksperymentu i eksploracji (ale interfejs musi być wyrozumiały!). Użytkownik poznaje obiekty, relacje między nimi i dostępne operacje. Pliki, foldery, ale też parafrafy (akapity). 2. Używaj, ale właściwych (liczne przykłady, ale też przykład z kotwicą i siekierą). Utrzymuj konsekwentnie metafory, jeśli nie działają w całej aplikacji - zmień je! 3. Nie zarzucaj użytkownika nadmiarem opcji! Dawaj je mu po trochu. Przykłady: osobne menu simple i advanced, wizardy. Udostępnij w łatwy sposób najważniejsze funkcje, trudniejsze mogą być nieco ukryte. Nie wyświetlaj wszystkiego, raczej twórz secondary windows do ustalenia szczególików. 4. To już jest sztuka, traktuj program jak publikację, może wynajmij nawet zawodowca. Grupuj elementy (ale nie za mocno), utrzymuj pewne konwencje, trzymaj jednolity styl, nie wariuj. Nie wyświetlaj za dużo naraz (most programs do). Słowem: pamiętaj, że użytkownik będzie się chciał w tym połapać. ZŁOTA ZASADA: 7 +/- 2 Instytut Informatyki Politechniki Śląskiej

Instytut Informatyki Politechniki Śląskiej Bądź konsekwentny! Zachowaj kontekst działań użytkownika W obrębie produktu i między produktami utrzymaj konsekwencję: prezentacji zachowania interakcji wyników Dbaj o estetykę Zachęcaj do eksploracji 1. Wizualne wskazówki (patrz 2 ekrany wcześniej) mówią gdzie jestem i co zrobiłem. Program pokazuje, co mogę zrobić. Mogę to zrobić w sposób konsekwentny, np. zacząłem klawiaturą i skończę nią, zacząłem w tym trybie i w tym trybie skończę, nie muszę się przełączać. Dostaję zawsze feedback i mogę zawsze przerwać/wznowić (por. 1 strona z tej serii). 2. Umożliwić użytkownikowi nauczenie się pewnych rzeczy ogólnych i korzystanie później z doświadczeń. W tym celu wszelkie standard i guidelines. a) Informacja w tym samym układzie logicznym i graficznym. Konsekwentnie stosować typy okien (jeśli raz wpisujesz coś w editboxie, trzymaj się już tego), sposoby sygnalizowanie (np.. Wyszarzanie, wielokropki w nazwach opcji). b) Ten sam obiekt zachowuje się tak samo (przykład: opcja bezpośrednio w menu głównym, bez podmenu, zaskakuje). To, co wygląda tak samo, powinno przcować tak samo. c) Standardowe skróty, menu itp. Przykład: przycisk Close w oknach Win3.x, Win 95 i OS/2. Kolejność przycisku OK./Cancel. Pytania Yes/No. d) Wyniki wyświetlaj zawsze w ten sam sposób. Informuj, jeśli coś by mogło zaskoczyć użytkownika. Nie powinien on podejrzewać, że gdzieś stosuje się jakieś czary-mary - żeby nie prowokować tzw. podejrzliwych zachowań. 3. Kompletna sztuka! Zachować konsekwencję kolorystyki, fontów, zastosować smak i wyczucie artystyczne. Program jak książka - układ (layout) Nie robić niedoróbek, robić proste dialogi, unikać pustki. 4. Już nie user-friendly, tylko fun-to-use. Interfejsy intuicyjne, przewidywalne, elastyczne i wyrozumiałe - teraz bardziej niż kiedykolwiek, bo takie mamy czasy. Instytut Informatyki Politechniki Śląskiej

Standardy i przewodniki (guidelines) Cel: zachowanie konsekwencji Konieczność: stały rozwój Poziomy standardów: międzynarodowe standardy platform (np. Windows, IBM CUA, Motif, Apple Macintosh) style korporacji (np. Microsoft) style linii (np. MS Office) style produktów (np. MS Word 97) Przykład standardu: QWERTY Określają na przykład, jak ma wyglądać edit box. Nie mogą ograniczać - stąd postulat rozwoju, stąd też postulat, żeby się tego kurczowo nie trzymać. Opowiedzieć o kwestii narzędzi developera.

Instytut Informatyki Politechniki Śląskiej Dziękuję za uwagę Na następnym wykładzie: Badanie użyteczności produktów Przegląd rozwiązań IU Instytut Informatyki Politechniki Śląskiej