Interakcja człowiek – komputer GUI (graphical user interface) mgr inż. Marek Malinowski Zespół Matematyki i Fizyki Wydz. BMiP PW Płock

GUI (graphical user interface) Wytyczne i zasady projektowania Wytyczne i zasady projektowania- zagadnienia wymagania normatywne zasady projektowania interakcji kryteria oceny interakcji ocena interfejsu użytkownika

GUI (graphical user interface) Wytyczne i zasady projektowania - normy Norma ISO / IEC 9126 funkcjonalność wydajność niezawodność łatwość konserwacji przenośność użyteczność zrozumiałość wyuczalność operacyjność atrakcyjność standardy użyteczności ISO 9241 - 11 skuteczność stopień w jakim realizowane są cele efektywność relacja między uzyskanymi wynikami a poniesionymi nakładami satysfakcja stopień zadowolenia odczuwalnego przez użytkownika

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 1. Zawsze widoczny status systemu System powinien zawsze informować co się aktualnie dzieje przez potwierdzenia podawane w tempie odpowiednim dla użytkownika Wskazówki realizacyjne należy zapewnić regularne wysyłanie do użytkownika informacji zwrotnej (potwierdzenia, pasek postępu, klepsydra, komunikat tekstowy) dla wzmocnienia informacji zwrotnej mogą być wykorzystane dźwięk podświetlenie animacje

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 2. Dopasowanie między systemem a światem zewnętrznym System powinien używać pojęć znanych użytkownikowi. Informacje powinny być podawane w naturalnym porządku, zgodnie z logiką i z rzeczywistością. Wskazówki realizacyjne prosty naturalny dialog (język, frazy, pojęcia, symbole) naturalna i logiczna kolejność pojawiania się informacji metafora używająca powszechnie zrozumiałych symboli prezentowanie tylko tej informacji, której użytkownik potrzebuje

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 3. Poczucie kontroli i swoboda działań Wybór opcji może być dokonany omyłkowo. Efekt wykonanych operacji powinien być odwracalny. Wskazówki realizacyjne stale potwierdzane postęp pracy i wyniki operacji system powinien prowadzić użytkownika przez kolejne etapy możliwe przerwanie pracy i ponowne kontynuowanie w każdej operacji dostępne funkcje: „cofnij” „powtórz” „anuluj”

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 4. Spójność i standardy System powinien zachowywać się w taki sam sposób we wszystkich miejscach. Należy przestrzegać ustalonych konwencji. Wskazówki realizacyjne spójność wizualna (podobny wygląd okien, ikon, kolorystyki) spójność operacyjna – te same operacje uruchamiane zawsze w ten sam sposób (np. te same skróty klawiaturowe Ctrl + C) spójność zachowań – przewidywalna reakcja systemu na działania użytkownika

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 5. Zapobieganie powstawaniu błędów Zamiast skupiać się na pisaniu lepszych komunikatów o błędach, należy zapobiegać powstawaniu błędów użytkownika. Wskazówki realizacyjne stosować wymuszanie potwierdzenia poleceń użytkownika wskazywać obiekty zamiast podawać ich nazwy należy stosować różnorodne pomoce zapobiegające typowym błędom (sprawdzanie ortografii, poprawności poleceń i ich parametrów, weryfikacja wprowadzanych danych, np. PESEL)

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 6. Rozpoznawanie zamiast przypominania Zapewnić dobrą widoczność wszystkich opcji, działań i obiektów. Instrukcje obsługi powinny być dostępne z każdego miejsca – nie obciążać pamięci użytkownika. Wskazówki realizacyjne nie obciążać użytkownika pamiętaniem danych (haseł, kodów) wszystkie opcje nawigacyjne muszą być widoczne od razu dialog nie powinien zawierać elementów niepotrzebnych lub używanych bardzo rzadko

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 7. Elastyczność i możliwość pracy na skróty System powinien umożliwiać pracę na skróty w miarę nabywania umiejętności przez użytkownika. Często wykonywane działania powinny dawać możliwość dostosowania do potrzeb użytkownika. Wskazówki realizacyjne stosować skróty na różnych poziomach (skróty klawiszowe, klawiaturowe klawisze poleceń, autouzupełnianie, listy ostatnio używanych obiektów/poleceń, paski szybkiego dostępu itp.) dostępna możliwość samodzielnego opracowania makropoleceń

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Pomoc w rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 8. Estetyczny i oszczędny design Dialog nie powinien zawierać niepotrzebnych elementów, nie związanych z wykonywanym zadaniem lub używanych rzadko - dodatkowe elementy zwiększają obciążenie użytkownika. Wskazówki realizacyjne im mniej elementów, tym lepiej dostrzegane i tym silniejsza koncentracja na zadaniu oszczędny i estetyczny wygląd jest zapowiedzią łatwej obsługi systemu

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 9. Rozpoznawanie, diagnozowanie i poprawianie błędów Komunikaty o błędach powinny być podawane prostym językiem, precyzyjnie wskazywać na czy polega problem i wskazywać sposób korekty błędu Wskazówki realizacyjne Przyjazny ton komunikatu nie obarcza użytkownika winą za spowodowanie błędu Używać wielopoziomowych komunikatów z odnośnikami do systemu pomocy on-line Zadbać o pełną odwracalność wyników operacji

Heurystyki Nielsena – niezależność od systemu i metod dialogu GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Heurystyki Nielsena – niezależność od systemu i metod dialogu Zawsze widoczny status systemu Dopasowanie między systemem a światem zewnętrznym Poczucie kontroli i swobody działań Spójność i standardy Zapobieganie powstawaniu błędów Rozpoznawanie zamiast przypominania Elastyczność i możliwość pracy na skróty Estetyczny i oszczędny wygląd (design) Rozpoznawaniu, diagnozowaniu i poprawianiu błędów Pomoc i dokumentacja

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt 10. Pomoc i dokumentacja Każdy system powinien zapewniać pomoc i podręcznik obsługi. Informacje powinny być łatwe do odszukania (spisy treści, rysunków, tabel, haseł) Wskazówki realizacyjne stosować różne uzupełniające się rodzaje pomocy (tutoriale, demo, przykłady, pomoc kontekstowa, kreatory) Pomoc podawana w atrakcyjny sposób – mało tekstu, tylko informacje związane z bieżącym zadaniem (problemem)

GUI (graphical user interface) Wytyczne i zasady projektowania - projekt Zasady dodatkowe (Normana) Widoczność Odwzorowania Ułatwienia Antycypacja – intuicyjność Eksploracja Pomoc dla niewidzących Prowadzenie i poczucie kontroli Przewidywalność Elastyczność Spójność

GUI (graphical user interface) Wytyczne i zasady projektowania – kryteria ocen Widoczność Odwzorowania Ułatwienia Antycypacja – intuicyjność Eksploracja Pomoc dla niewidzących Prowadzenie i poczucie kontroli Przewidywalność Elastyczność Spójność Rozszerzenia kryteriów: urządzenia we/wy urządzenia mobilne rzeczywistość wirtualna

GUI (graphical user interface) Wytyczne i zasady projektowania –ocena Metody zgodności interfejsu z wytycznymi projektowymi Ocena ekspercka – analityczna Inspekcje, przeglądy i listy kontrolne Oceny porównawcze

GUI (graphical user interface) Wytyczne i zasady projektowania –ocena Lista Ravdena-Johnsona Klarowność wizualna Spójność dialogu Zgodność z oczekiwaniami Potwierdzenia informacyjne Przejrzystość systemu Adekwatna funkcjonalność systemu Elstyczność i kontrola systemu Zapobieganie i poprawa błędów Prowadzenie i wsparcie użytkownika

GUI (graphical user interface) Wytyczne i zasady projektowania –ocena Inne listy kontrolne: Lista kontrolna Xerox Lista kontrolna IsoNorm (wg kryteriów ISO 9241-10) Lista kontrolana do oceny e-lerningu Lista kontrolna do oceny interfejsu telefonów komórkowych