1

Projektowanie Graficznych Interfejsów Użytkownika

Robert Szmurło

2

Różnorodność interfejsów użytkownika

Internet:

– strony domowe,

– sklepy internetowe,

– serwisy korporacyjne, intranet,

– serwisy bankowe,

– serwisy informacyjne,

– wyszukiwarki,

– blogi.

Aplikacje

– biurowe,

– inżynierskie / naukowe,

– grafika komputerowa,

– programiści,

– przemysłowe (magazyny, sterowanie itp.),

– systemy ogólnego przeznaczenia.

Urządzenia:

– multimedialne (pilot TV),

– dotykowe, bezdotykowe,

– mobilne,

– bankomaty.

Kategorie interfejsów użytkownika

3

Ograniczenia Techniczne sprzętowe

● Problem rozmiaru ekranu i orientacji wyświetlacza:

Skalowalny interfejs - problem trzech możliwych stanów wyświetlania aplikacji:

Pełny ekran Okno zadokowane Okno część ekranunie zajętą przezzadokowanąaplikację

4

Ograniczenia Techniczne oprogramowania● Aplikacje internetowe:

– protokół bezstanowy (tzw. cienki klient –

problem śledzenia stanu interfejsu),

– bezpieczeństwo,

– ograniczone możliwości dostępu do danych, (problem okienek dialogowych i szybkiego wyszukiwania)

– problem z nawigacją (wygodne do formularzy, ale trudne wypełnianie danych w tabelach, dwuklik myszką),

– kontrola przycisku Wstecz (a co się stanie gdy wciśniemy wstecz w Google Spreadsheet?),

– ograniczone możliwości współpracy z urządzeniami interfejsu użytkownika (akcelerometr, kamera, itp.),

– kompatybilność przeglądarek,

– itd.

5

Ograniczenia socjologiczne

● Aplikacje biurowe:

– prostota obsługi,

– szablony, automatyzacja zadań biurowych,

– skróty klawiaturowe,

– ergonomia interfejsu,

– adaptacyjność - dostosowanie do preferencji i zmieniających się potrzeb użytkownika użytkownika

● Systemy inżynierskie:

– duże możliwości,

– dopuszczalny skomplikowany interfejs.

6

Ograniczenia techniczne – współpraca z innymi systemami

● Systemy czasu rzeczywistego (TV, GSM, przemysłowe, routery):

– udostępniają tylko niezbędne funkcje,

– często brak myszki i klawiatury,

– niestandardowe klawisze – brak możliwości dostosowania interfejsu przez użytkownika

– interfejs musi być udostępniony przez sieć?

– problem obserwowalności stanu (historia działania)

● Systemy przemysłowe (SCADA):

– ograniczona i bardzo specjalistyczna funkcjonalność,

– bezawaryjność,

– obserwowalność: czyli widoczność wszelkich usterek i awarii, wizualizacja procesów

– BEZPIECZEŃSTWO - Spies 'infiltrate US power grid' By Maggie Shiels, Technology reporter, BBC News, Silicon Valley (http://news.bbc.co.uk/2/hi/technology/7990997.stm)

7

O czym będziemy mówić na kursie?

● Na niniejszym kursie skoncentrujemy się na interfejsach biznesowych, które stanowią znakomitą większość powstających aplikacji.

● Większość aplikacji pisanych na zamówienie dotyczy udostępnienia mechanizmów manipulacji danymi w bazie oraz wyświetlania raportów wynikowych.

● W przypadku takich aplikacji najłatwiej jest sformalizować pewne standardowe metodyki projektowania i wytwarzania.

● Aplikacje specjalistyczne wymagają zazwyczaj innych metodyk.Na przykład trudno sobie wyobrazić wzorzec projektowy MVC zastosowany do symulatora lotu.

8

Dlaczego graficzne interfejsy?

9

Interfejs Użytkownika Jest WażnyInterfejs wpływa na odbiór

programu/strony przez użytkowników.

– Użyteczne oprogramowanie lepiej się sprzedaje.

– Nieużyteczne strony są szybko porzucane.

– Do estetycznego / użytecznego programu z większą przyjemnością się wraca (np. z przerwy na kawę :-).

Interfejs jest często niedoceniany, traktowany powierzchownie, bezkrytycznie, zwłaszcza przez programistów, dla których ważne są algorytmy i struktury danych.

– Użytkownicy często obwiniają siebie za błędy w projekcie interfejsu. („Argh, znowu zapomniałem, że muszę wcisnąć Zapisz. Muszę jeść mniej masła!”)

– Osoby decydujące o zakupie/projekcie systemu zazwyczaj nie są końcowymi użytkownikami, dlatego często nie dbają o ważne szczegóły.

GUIJESTWAŻNY

10

Słaby projekt dużo kosztuje...

To truizmy, ale należy o nich wspomnieć:

– Czas użytkownika!Koszt czasu użytkownika wcale się nie zmniejsza zgodnie z prawem Moore'a. (natomiast: "moc obliczeniowa komputerów podwaja się co 18 miesięcy", czyli należy automatyzować jak najwięcej czynności)

– Utrzymanie systemu!Należy poświęcić więcej czasu na projekt, bo zapłaci się za niedokładność później, podczas utrzymania systemu. Zły projekt i nieprawidłowy, nieelastyczny podział na komponenty wizualne potrafi utrudnić rozwój.

– Bezpieczeństwo!Błędny interfejs powoduje wypadki!

● Therac-25 (http://en.wikipedia.org/wiki/Therac, Nancy Leveson, “Medical Devices: the Therac-25”, 1995, http://sunnyday.mit.edu/therac-25.html)

● System radarowy USS Vincennes (Peter Neumann, “Aegis, Vincennes, and the Iranian Airbus“, Risks v8 n74, May 1989).

11

Interfejs Użytkownika – Za mało poświęcamy mu uwagi

Coś na pocieszenie: Nie jest łatwo...

– Nie jesteś użytkownikiem.● Większa część inżynierii

oprogramowania zajmuje się komunikacją między programistami (specyfikacje, modele obiektowe, biblioteki, etc.).

● UI (Interfejs Użytkownika) zajmuje się 'tylko' komunikacją z użytkownikiem.

– Użytkownik ma zawsze rację...● Jeśli użytkownik ciągle popełnia błędy

podczas używania programu, to najprawdopodobniej winny jest projekt.

● ... ale niestety użytkownik czasem nie ma racji, ponieważ ma zbyt małe doświadczenie i wiedzę! Nie traktujmy każdego użytkownika jak 'eskperta'.

12

Dobry interfejs też kosztuje

Szacuje się, że wytworzenie UI stanowi 50%:

– czasu poświęconego na projekt

– czasu na implementację

– kosztów / czasu utrzymania systemu

– rozmiaru całkowitego kodu systemu

Redukcja nakładów tworzenia UI:

– Komponenty (kontrolki, databinding, itp.)

– Ponowne wykorzystanie (widoki obiektów, itp.)

– Maksymalnie uniwersalne komponenty (DBGrid)

– Automatyzacja generowania interfejsów (MS Access, Delphi ECO)

– DOBRY PROJEKT

13

Interfejs Użytkownika – Na co zwraca się uwagę?

Funkcjonalność

– ergonomia, prostota obsługi, czytelność prezentowanej informacji, realizacja określonych zadań itp.

Odporność na błędy

– stabilność, powtarzalność, konsekwencja, zgodność...

Estetyka

– odbiór aplikacji przez użytkowników, czy danej aplikacji używa się z przyjemnością i chętnie do niej wraca

– odpowiedni dobór kolorów i wyróżnień tak aby nie utrudniały odbioru przedstawionej informacji

Dostępność

– czy nasza aplikacja może być wykorzystywana przez osoby z ograniczonymi możliwościami fizycznymi,

– czy aplikacja może być łatwo dostosowana dla obcokrajowców?

14

HCI – Komunikacja Człowiek-Komputer

● Dyscyplina zajmująca się badaniem i ogólnymi zasadami projektowania metod interakcji człowieka z komputerem

– głównym zadaniem HCI jest udoskonalenie użyteczności produktów informatycznych

– dobór funkcjonalności dopasowanej do potrzeb użytkownika

– organizacja pracy z komputerem (np. zespołowej)

– wpływ technologii informatycznych na życie codzienne użytkowników

● HCI wykorzystuje narzędzia badawcze z:

– nauki techniczne i psychologia, marketing, socjologia, antropologia, neurolingwistyka

● Ten wykład będzie nawiązywał do HCI, ale będzie skoncentrowany na aspektach praktycznych i technicznych.

15

Powiedz Kolory Czcionki Na Głos

Książka

Ołówek

Slajd

Okno

SamochódSamochód

Kapelusz

Na początek mały test. Proszę głośno powiedzieć kolory w jakich napisane są słowa.

16

Powiedz Kolory Na Głos Ponownie

Niebieski

Zielony

Pomarańczowy

CzarnyCzarny

CzerwonyCzerwony

Żółty

Jest to efekt Stroopa demonstrujący wielokanałowe przesyłanie informacji.

Wniosek: Dodatkowe bodźce powinny wzmacniać podstawowe,a nie konkurować z nimi. Nie jesteśmy w stanie łatwo skoncentrować się na pojedynczym bodźcu. Automatycznie działają na nas wszystkie.

Proszę ponownie głośno powiedzieć kolory w jakich napisane są słowa.

17

Przykłady wielokanałowego przekazywania inf...

Odpowiedni dobór kolorów... (Easy CD Creator)

Zbyt mały kontrast utrudnia używanie aplikacji dla niepełnosprawnych. (Accessibility) (Apple's QuickTime 4.0 Player)

Błąd. Sukces.

18

Koszmarki

Cel:

– wprowadzenie w problematykę

– wytworzenie wrażliwości na typowe błędy i niekonsekwencje

– przedstawienie błędów w komercyjnych produktach

19

Interfejs Użytkownika - Galeria Niesławy

W pełni graficzny.

Myszka.

WYSIWYG.

Długi komunikat pomocy.

Dziwaczny interfejs.

Scrollbar - Suwak

(ang. hall of shame)

20

Poprawiony Interfejs

Lista wyboru (Listbox) udostępnia zmianę stylu dla sporadycznych jak i stałych użytkowników.

Swobodny wybór dla stałych użytkowników.

Niepotrzebny jest żaden komunikat pomocy.

21

Więcej Galerii Niesławy

powiększ

A najgorsze jest to, że programista napracował się bez sensu... :-(

Wymyślanie nietypowej, niestandardowej interakcji, utrudniającej naukę obsługi.

22

Galeria Sławy czy Niesławy

Brak menu. Dynamiczne klawisze Skrótów. Czy użytkownik zawsze potrzebuje dostosowywać aplikację? Gdzie jest granica rozsądku?

Podatność na przypadkowe błędy, brak możliwości cofnięcia operacji...

23

Przykłady

OzWin II – program do czytania wiadomości offline (Compuserve Information Service), niedostosowana kontrolka do danych

SimCity 2000 firmy Maxis. Przyciski, które mają podmenu dostępne po długim wciśnięciu przycisku myszki, ukrycie rzeczywistego stanu systemu, kontrolki, interfejsu

24

Przykład

Nawigacja za pomocą klawisza Tab.

– (Unisyn's Automate Pro – program do automatyzacji zadań dla Windows NT.)

– Kolejność nawigacji po kontrolkach niezgodna z kolejnością wprowadzania danych...

25

Przykłady

Pomoc kontekstowa jest bardzo potrzebna, ale przesada, a zwłaszcza długie komunikaty mogą doprowadzić do frustracji.

Nie należy wyświetlać pomocy do rzeczy oczywistych...

26

Przykłady

Niewłaściwy dobór kontrolki, jednostki pozostawiają wiele do życzenia – powinno być również w MB, powinna być możliwość wprowadzenia rozmiaru. (Internet Explorer 3.0 – Rozmiar Cache)

Instalacja programu PowerSearch. Nie ma problemu, gdy użytkownik wybierze katalog domyślny. A co gdy będzie chciał zainstalować gdzie indziej? Brak pomocy w postaci okna do wyszukiwania folderów...

A tak w ogóle, czy nie dałoby się sprawdzić gdzie jest zainstalowany Word?

27

Przykłady

Użytkownicy zdecydowanie szybciej przeglądają listy w kierunku od góry do dołu (heurystyka). Tutaj Microsoft jednak zmusił ich do przeglądania dodatkowo od lewej do prawej. (Internet Explorer 3.0)

28

Przykłady

Program: HTML Transit

Poświęcanie 25% powierzchni okna na przyciski komend?

– Staraj się nigdy nie mieć dwóch przycisków o takim samym znaczeniu.

– Efektywnie wykorzystuj przestrzeń ekranu...

29

Przykłady

PowerBuilder – udostępniał pomoc kontekstową i pomoc w Pasku Statusu.

– Problem: pomoc kontekstowa była pokazywana z opóźnieniem ok 2s, ale również pomoc w pasku status była pokazywana z opóźnieniem.

– Skutek: po zmianie pozycji myszy, w pasku statusu była nieaktualna informacja.

30

Przykłady

Przyciski powinny być nieaktywne!

Możemy być pewni, że programiści Microsoft potrafią dynamicznie zmieniać kolory ikon. Czy zatem wpływ na wyeliminowanie 'szarych', nieaktywnych ikon mieli graficy Microsoft?

Zapobieganie błędom użytkownika – wizualna prezentacja stanu, aby nie musiał sprawdzać „czy zadziała?”

31

Przykłady

Microsoft Excel – Wytnij i Wklej

Po wciśnięciu wytnij, fragment pozostaje nienaruszony do momentu aż go nie wkleimy w nowym miejscu.

Ponieważ 'wszyscy' znają Excela więc spodziewam się gorącej dyskusji. :-)

32

Przykłady

Okna z suwakami! Horror Accessa?

„Unfortunately, visit any programming support forum, and you'll see an ever-increasing number of new programmers asking how to create scrollable forms. The only appropriate answer is, "You don't."”

Nieukrywanie elementów interfejsu użytkownika.

PeopleSoft

33

Przykłady

Chyba ktoś nie przeczytał o kontrolce listy wyboru? (Listbox?)

Dobór odpowiednich kontrolek.

34

Przykłady

Znajdź użytkownika w rozwijalnej liście zawierającejkilka tysięcy nazwisk?

Są lepsze sposoby walidacji, czy użytkownik wpisał rzeczywiście cyfry! (np.: InputMask)

35

Przykłady

MS Word: Wykluczające się opcje. Dlaczego nie zostały użyte komponenty RadioButton. Należy zaznaczyć, że bardzo nam to nie przeszkadza i szybko jesteśmy się w stanie tego nauczyć, ale jest to jednak niespójność.

Sierpień 1999 edition of the Visual Basic Programmer's Journal 101 Tech Tips for VB Developers

Niewielki fragment kodu może ograniczyć wybór użytkownika dojednej pozycji w danym momencie. Taka zmiana jest użyteczna gdy chcesz użyć checkboxów zamiast radiobutton.

Ostatnie zdanie powinno brzmieć: Ta zmiana jest użyteczna gdy chcesz zmylić użytkownika.

36

Przykład

Użytkownicy są przyzwyczajeni do okienek potwierdzeń! Większość wciska ENTER bez czytania. Tym bardziej, że poniższe okno ma więcej niż dwie linijki tekstu :-).

ENTER? ESCAPE? A w oknie są przyciski OK i Cancel?

MacOS rozwiązał to inaczej: często klawisze nie są obsługiwane. Tylko kliknięcie myszką zamyka okno.

Instrukcja powinna być zgodna z interfejsem.

37

Przykłady

Internet Explorer, Visual Studio.Czy kontrolka Checkbox jest niezbędna? Przecież i tak nie mamy żadnego wyboru?

No tak. Projektant chciał abyśmy uniknęli automatycznego wciśnięcia klawisza enter, enter, enter...

38

Przykłady

Quiz: Ilu użytkowników wciśnie Enter? Ilu Next? A ilu Finish? Zapobieganie dylematom użytkownika – zbyt dużo opcji...

Oracle's SQL*Net Easy Configuration

Quiz 1: Jak wyjść z aplikacji?

Nazewnictwo – jeżeli CancelOznacza Exit, to tak powiniensię nazywać.

Quiz 2: Po co ten komunikatjeśli nie można anulowaćdecyzji?

39

Przykłady

Windows Help Designer. Programista zapomniał zaznaczyć opcji automatycznego sortowania. Dopracowanieszczegółów interfejsu!

Instalacja modemu U.S. Robotics:

Nazewnictwo etykietzgodne z czynnością ==brak instrukcji :-)

W dodatku tylko opcje direct dial i postal mailpowinny być aktywne.

40

Przykłady

Kontynuuj używanie, czyproces zamykania?Czym różni się Abort odCancel? Komendy nie powinnybudzić wątpliwości.

Proces tworzenia tabeliw MS Access dla nowegoużytkownika może staćsię nie lada wyzwaniem?

Edycja bezpośrednia!

41

Przykłady

Xblock – gra. Kto chciałby zająć miejsce numer 0?

(Dopracowanie aplikacji.)

IBM's AudiostationQuiz: Co się stanie gdywciśniemy Power?

Ładna, ale nieprecyzyjna metafora, do której nie jesteśmy przyzwyczajeni na komputerze.

42

Przykłady

Rozmieszczenie przycisków.

Ok czy OK? Po co używać ALT+O i ALT+C, przecież i tak większość będzie wciskać ENTER i ESC.

ZGODNOŚĆ ZE ŚRODOWISKIEM PRACY UŻYTKOWNIKA!

43

Przykłady – Idiotyczne komunikaty

ClearCase, a source-code control system from Rational Software:

NT workstation

Quicken's Turbo Tax – anulowanie niemalże każdej czynności:

44

Przykłady

Nieprawidłowe użycie kontrolek:

– (uninstalling „Freeloader”, an off-line internet browser)

– Kontrolki używane do zmianystanu systemu zostały użytejako kontrolki informujące o stanie.

„Classified”, a shareware diary program:

– nie można wprowadzać datyza pomocą klawiatury,

– zmienić rok można tylkoza pomocą paska,

– wpiszmy teraz rok urodzenia 1921

45

Przykłady

Microsoft's NT Operating System:

– Od kiedy sukces jest błędem? Wzajemne zaprzeczanie się informacji przekazywanej różnymi kanałami.

Microsoft's Access 95:

– Komunikat pojawia się przy próbie uruchomienia kwerendy, która w wyniku nie modyfikuje żadnych wierszy.

46

Przykłady

Pretty Good Privacy:

(Niedopracowane szczegóły...)

47

Przykłady

Nie istniejący obiekt...

– nie, to tylko brak uprawnień do odczytu

– wprowadzanie w błąd poprzez niedopracowanie aplikacji, programista powinien sprawdzić czy użytkownik ma uprawnienia i wyświetlić stosowny komunikat...

Brak szacunku dla czasu użytkownika – czas jaki poświęciła rzesza użytkowników na świecie na kontakt z Helpdeskiem był na pewno dłuższy niż czas jaki poświęciłby programista na sprawdzenie uprawnień.

– Nie wprowadzaj użytkownika w błąd.

48

Przykłady

● Moodle – system do tworzenia serwisów dydaktycznych

● Spróbuj zmienić opis dotyczący zajęć...

– Nie ukrywaj funkcjonalności przed użytkownikiem.

49

Przykłady - Nie ukrywaj funkcjonalności przed użytkownikiem.

● System Ankieta Jednostki opracowany przez OPI na zlecenie Ministerstwa Nauki i Szkolnictwa Wyższego w 2013 roku.

● Jak przenieść osobę z wykazu osób w kategorii N bez usuwania jej z bazy danych?

–

50

DEMO

51

Interakcja

Dziękuję za uwagę.

Chcemy być coraz lepsi!

Jeżeli coś cię zainteresowało napisz e-maila:

– robert@iem.pw.edu.pl

Jeżeli coś cię bardzo znudziło napisz e-maila:

– robert@iem.pw.edu.pl

Jeżeli zauważyłeś błąd napisz e-maila:

– robert@iem.pw.edu.pl