Projektowanie Graficznych Interfejsów Użytkownika. Robert Szmurło

Transkrypt

1 Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło 1

2 Wskazówki projektowe (ogólne i szczegółowe) 2

3 Wskazówki Projektowe Heurystyczne Wskazówki ogólne, różnorodność źródeł, 10 ogólnych zasad Nielsena związanych z użytecznością. Wskazówki szczegółowe: Mac, Windows, Gnome, KDE, Java. 3

4 1. Zgodność z rzeczywistością Używaj powszechnego słownictwa. Unikaj technicznego żargonu. Używaj terminologii związanej z dziedziną aplikacji. Używaj tego samego języka co użytkownik. Zezwalaj na stosowanie skrótów/synonimów w językach skryptowych. Metafory i przenośnie mogą być użyteczne, ale również mogą czasem wprowadzać w błąd. 4

5 2. Zgodność i Standardy Zasada minimalnego zaskoczenia Podobne elementy funkcjonalne powinny podobnie wyglądać i podobnie się zachowywać. Rożne elementy odwrotnie. Używaj jednolitej terminologii. Bądź zgodny z zasadami danej platformy. 5

6 Trzy Poziomy Zgodności Wewnętrzna (Aplikacja) Zewnętrzna (Platforma) Przenośna (z rzeczywistością do której odnosi się aplikacja) 6

7 3. Pomoc i Dokumentacja Użytkownicy nie czytają dokumentacji! Ale podręczniki oraz pomoc online są istotne, Wolą spędzić czas pracując nad swoimi zadaniami, a nie uczyć się obsługi systemu! zazwyczaj, gdy użytkownik jest zagubiony lub ma jakiś problem. Pomoc powinna być: możliwa do przeszukiwania, dopasowana do kontekstu (aktualnego), ukierunkowana na określone zadania, konkretna, KRÓTKA, ZWIĘZŁA,...! 7

8 4. Kontrola Użytkownika i WOLNOŚĆ Udostępniaj możliwość cofnięcia operacji. (Ulubione CTRL+Z). Długie operacje muszą móc być możliwe do wstrzymania, przerwania lub anulowania. Wszystkie okna dialogowe powinny mieć przycisk 'Anuluj'. 8

9 5. Obserwowalność Stanu Systemu Informuj użytkownika na bieżąco o stanie systemu. Kształt kursora. Podświetlenie wyboru. Pasek stanu. Nie przesadzaj... Czas odpowiedzi: < 0.1s: niezauważalny, 0.1 1s: zauważalny, ale nie potrzebna żadna reakcja, 1-5s: zmień kursor na klepsydrę, > 5s: wyświetl pasek postępu. 9

10 6. Elastyczność i Wydajność Udostępnij łatwych do nauczenia się skrótów dla często używanych operacji. skróty klawiaturowe, skróty komend, style, zakładki (ulubione), historia,(mfu - most frequently used) 10

11 7. Zapobiegaj Błędom Wybieranie jest mniej narażone na błędy niż wpisywanie ale najgorzej jest przesadzić... Zablokuj niedozwolone komendy Zablokuj (ale nie ukrywaj) nieprawidłowe pola. 11

12 8. Rozpoznawanie Lepsze od Przypominania Używaj menu, a nie skomplikowanych komend (unix,vi), Używaj możliwych do edycji list rozwijalnych (combobox), a nie pól edycji, Używaj standardowych komend (Otwórz, Zapisz, Wytnij, Wklej) Niezbędna informacja powinna być w całości widoczna. 12

13 9. Raportowanie Błędów, Diagnostyka, Odzyskanie Bądź precyzyjny, pokaż dane wprowadzone przez użytkownika, Wyświetl konstruktywną pomoc Dlaczego wystąpił błąd i jak go naprawić? Bądź uprzejmy i nie obwiniaj użytkownika: Nie Nie mogę otworzyć pliku, ale Nie mogę otworzyć pliku o nazwie konkretny.txt. Nie: Wprowadziłeś nieprawidłowe dane! tylko System nie potrafi zinterpretować wprowadzonych danych. Ukryj szczegóły techniczne, dopóki użytkownik ich nie zażąda. 13

14 10. Ascetyczny i Minimalistyczny Projekt Im Mniej tym Lepiej Nie przesadzaj z nadmiarem informacji, grafiki, funkcjonalności. Perfekcji nie osiąga się gdy nie ma już nic więcej do dodania, lecz wtedy gdy nie ma już nic do usunięcia. (Antoine de St-Exupery) Reguła: KISS Keep it simple, stupid. 14

15 16 Reguł Bruce'a Tognazzini Przewidywalność Obiekty ludzkiego interfejsu Autonomia Redukcja opóźnienia Daltonizm Uczenie się Zgodności Przenośnie Wartości Domyślne Wydajność Odkrywalność Interfejsu Prawo Fitta Zabezpieczenie pracy użytkownika Czytelność Przywracanie stanu Klarowna nawigacja 15

16 Innowacje (interfejsy użytkownika do których jesteśmy rzadziej przyzwyczajeni) 16

17 Innowacje Trójwymiarowe interfejsy użytkownika. 3D Windows Vista Linux (X Window + xgl): (AERO): półprzezroczystość, przełączanie między aplikacjami, Compiz (Gnome), Beryl (KDE) Mac OS X Mac OS X gadżety 17

18 Beryl - prezentacja Gumowe okna. Kostka 3D Trójwymiarowe okna. Powiększanie widoku. Animowane zwijanie okien. Przezroczystość. Przełączanie między oknami. Podgląd zwartości okna w pasku zadań oraz podczas przełączania Alt+Tab. Rysowanie po ekranie. Aktywne narożniki. 18

19 Mac OS X - Leopard Nowości w Interfejsie Mac OS X Leopard Rozmiary elementów graficznych w jednostkach bezwzględnych, a nie w pixelach. Animacje niektórych elementów graficznych. (Core Animation) Wyszukiwanie w pozycjach menu. Nacisk na integrację z Desktopem a zwłaszcza: wyszukiwaniem (indeksowaniem) szybkim podglądem 19

20 Wielopunktowa interakcja człowiek komputer Ekrany dotykowe składają się w większości w zasadzie z dwóch urządzeń. Jedno z nich służy do wyświetlania obrazu obecnie najczęściej stosuje się ekran LCD, ale może być też ekran CRT lub projektor. Drugim elementem, wchodzącym w skład ekranu dotykowego, jest urządzenie reagujące na dotyk lub zbliżenie palca albo rysika do ekranu. Istnieje wiele rodzajów takich ekranów. 20

21 Typy ekranów doktykowych Rezystancyjne 1971 r. - Dr. Samuel C. Hurst tworzy powierzchnię reagującą na dotyk i wykorzystuje 1974 roku (ta sama osoba) pierwszy ekran dotykowy (ang. touchscreen), 1977 roku ekran oparty o zasadę zmiany oporu z pięcioma przewodami został opatentowany. Pojemnościowe Podczerwone Akustyczne 21

22 Ekran rezystancyjny Głównymi elementami oporowych ekranów dotykowych są dwie warstwy: sztywna i elastyczna. Na obie warstwy napylona jest cienka, przeźroczysta warstwa przewodnika, jest nią związek indu, cyny i tlenu (ITO). Warstwy z napylonym przewodnikiem oddzielone są drobinami izolatora. Nacisk na warstwę elastyczną prowadzi do zetknięcia się warstw przewodników, a więc zamknięcia obwodu. Panele dotykowe posiadają od czterech do ośmiu przewodów. Układy elektroniczne dokonują pomiaru spadku napięcia zależnego od współrzędnych między przeciwległymi bokami poziomymi i pionowymi ekranu. 22

23 Ekran rezystancyjny Pozwala to na wyznaczenie położenia miejsca dotyku. Żywotność ekranów tego typu to około 35 milionów dotknięć. Czas reakcji 5-10ms, rozdzielczość 300dpi. Rozwiązanie takie jest najczęściej stosowane w wersji cztero- lub pięcioprzewodowej. Występuje w urządzeniach, takich jak pockety czy nakładki dotykowe na monitory komputerowe. Gdy powierzchnia dotykana jest w więcej niż jednym miejscu to odczytana współrzędna jest równa środkowi ciężkości położenia wszystkich punktów. 23

24 Panel pojemnościowy Panele dotykowe mogą być zrealizowane poprzez pomiar zmiany pojemności. Panel taki składa się z dwóch warstw szkła, między którymi napylony jest przewodnik. Na rogach panelu umieszczone są generatory pola elektromagnetycznego. Zbliżenie dłoni do panelu powoduje zmianę wartości upływającego prądu. Prąd zmierzony na każdej elektrodzie pozwala na wyznaczenie współrzędnych dotykania ekranu. Na podstawie tego pomiaru wyznaczane są współrzędne dotykania ekranu. 24

25 Panel pojemnościowy Zaletą tego rozwiązania jest duża odporność na zniszczenia około 160mln dotknięć na punkt, ponieważ warstwa szkła, którą dotyka użytkownik może być szkłem odpornym na uszkodzenia mechaniczne. Czas reakcji na dotyk to około 8-24ms. W grupie paneli pojemnościowych można wyróżnić też panele NFI (Near Field Imaging). Ich czułość umożliwia korzystanie również za pomocą nieprzewodzącego rysika lub dłoni w rękawicy. Ze względu na swoją wyjątkową wytrzymałość wykorzystywane są w urządzeniach użytku publicznego. Ich wytrzymałość przekracza 100mln dotknięć na punkt, a czas reakcji jest mniejszy niż 20ms. 25

26 Panel podczerwony Na panelu, przy dwóch sąsiadujących ze sobą krawędziach, umieszczone są diody emitujące światło podczerwone. Na przeciwległych krawędziach znajdują się również czujniki podczerwieni. Jeśli wiązka światła zostanie przerwana to oznacza to, że ekran został dotknięty. Rozwiązanie takie pozwala na budowę paneli o bardzo dużych przekątnych, rzędu 150 cali. Wytrzymałość jest niezależna od liczby dotknięć a określona jest czasem działania urządzenia około 140tyś godzin czyli prawie szesnaście lat nieprzerwanej pracy. Czas reakcji to około 10-15ms. 26

27 Ekrany wielopunktowe Ekrany oparte o zasadę całkowitego wewnętrznego odbicia Urządzenie wraz z pokazem możliwości zaproponował 2006 roku Jeff Han Ekran opary o zasadę całkowitego wewnętrznego odbicia składa się z płyty pleksi, wzdłuż jej krawędzi umieszczone są diody podczerwone. Światło diod skiero-wane jest do środka płyty. Ponieważ światło znajdujące się w płycie pada pod małym kątem na granicę środowisk o różnym współczynniku odbicia, więc dochodzi do całkowitego wewnętrznego odbicia. Gdy do powierzchni ekranu przyłożony zostanie palec to zmienią się współczynniki załamania na granicy środowisk i palec zostanie podświetlony. Na powierzchnię płyty pleksi skierowana jest kamera, która rejestruje światło podczerwone. W miejscach, gdzie użytkownik dotknie ekranu obraz jest jaśniejszy. Analiza obrazu pozwala na określenie miejsca dotykania płyty z pleksi. 27

28 Budowa ekranu dotykowego 28

29 Rozpoznawanie obrazu 29

30 Przykładowa aplikacja 30

31 Microsoft Office 2007 Results oriented user interface Wstążka ( The ribbon) łączy menu i paski narzędzi w jeden element GUI. Home most frequently used features, Contextual tabs (Kontekstowe wstążki) związane z aktualnie zaznaczonym obiektem, Microsoft Office Button common file commands Zaznaczanie tekstu menu kontekstowe, najbardziej typowych opcji, Galerie (browsing galeries) Live Preview Basic tasks: marginesy, układy wykresów, diagram w powerpoint Zooming 31

32 Microsoft Office 2007 Poprawiona praca z obrazkami, Związanie obrazka z lokalizacją kursora, Insert Tab from the ribbon Picture button (select the photo), drop shadow Zakładka kontekstowa (contextual tab->position) Funkcjonalność wspomagająca tworzenie artykułów (Convenience features caption, citation) Stopka insert footer Quick Access Toolbar możliwość dostosowania Nowe możliwości: Power Point-> lista elementów- zaznacz->convert to diagram (layout) 32

33 Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz a: Jeżeli coś cię bardzo znudziło napisz a: Jeżeli zauważyłeś błąd napisz a: 33