Rozdział V Interfejsy graficzne, projektowanie interfejsu graficznego

/Paweł Bensel/

Interfejs użytkownika (ang. user interface, UI) to część aplikacji odpowiadająca na komunikację z użytkownikiem. Użytkownik nie ma możliwości bezpośredniej komunikacji z systemem komputerowym, komunikacja obsługiwana jest przez stworzony infterfejs użytkownika, który może przyjmować jedną z nastepujących postaci:

Wiersz poleceń (linia komend) – polecenia wydawane są przy pomocy zdefiniowanych komend wpisywanych na klawiaturze. Przykładem tego rodzaju interfejsu jest system DOS, wiersz poleceń systemu Windows, czy Windows PowerShell .

Interfejs/tryb tekstowy – polecenia wydawane są klawiaturą lub myszką, elementy interfejsu wyświetlane są na ekranie w trybie tekstowym, przy użyciu znaków specjalnych budowane są prostokąty imitujące okna, przyciski itp. Przykładem użycia interfejsu tekstowego jest program Midnight commander

Interface Interfejs/tryb graficzny – informacje są prezentowane w formie graficznej, komendy wykonywane są poprzez wskazanie kliknięcie myszką lub wskazanie elementu na ekranie dotykowym.

Nowoczesne aplikacje najczęściej pracują w trybach graficznych, dzięki czemu ich wygląd jest bardziej przyjazny dla użytkownika. Graficzna prezentacja działań aplikacji oraz komunikacji z użytkownikiem nazywana jest interfejsem graficznym. Interfejsy graficzne to część tzw. User Experience (z ang. doświadczenie użytkowania), które obejmuje całość wrażeń, jakich doświadcza użytkownik podczas korzystania z danego produktu. O wygodzie użytkowania z określonego interfejsu decyduje układ poszczególnych elementów na ekranie, ich ułożenie względem siebie, możliwość szybkiego dostępu do określonych funkcji, ale również wybrana czcionka czy użyte ikony, ich wielkość czy kolor.

Aplikacje uruchamiane w wierszu poleceń wymagają od użytkownika zaznajomienia się z dokumentacją lub pomocą określonego polecenia, aby móc uruchomić poszczególne funkcje.

W trybie tekstowym uruchamiać można również aplikacje, dla których utworzony został tekstowy interfejs (np. Midnight Commander) - są on bardziej przyjazne od aplikacji uruchamianych w wierszu poleceń, bardzo często na ekranie wyświetlane są informacje opisujące poszczególne funkcje, użytkownik nie musi znać określonych komend, ponieważ polecenia wydawane są poprzez wybór elementów na ekranie (najczęściej określonym skrótami klawiszowymi lub przy pomocy strzałek na klawiaturze).

Największą popularnością cieszą interfejsy graficzne – są on bardzo intuicyjne, przejrzyste i przyjazne dla użytkownika. Poszczególne funkcje aplikacji uruchamiane są poprzez przyciski i ikony, ich wielkość powinna być dopasowana do urządzenia, na którym działa aplikacja, wpisywanie tekstu z klawiatury używane jest tylko do przekazywania danych wejściowych.

Zasadami tworzenia doświadczeń użytkownika mówią, że powinny być one pozytywnie odbierane przez użytkownia i zaprojektowane zgodnie z podejściem zorientowanym na użytkownika (ang. user-centered design), co oznacza, że użytkownik aplikacji bierze udział w kolejnych etapach jej tworzenia.

V.1. Projektowanie interfejsu graficznego użytkownika

W pierwszych latach użytkowania komputerów komunikowały się one z użytkownikami przy pomocy komunikatów wyświetlanych na ekranie, wprowadzanie danych odbywało się przy pomocy klawiatury.

Wraz ze wzrostem możliwości sprzętu oraz dostępnością urządzeń wspomagających obsługę grafiki interfejs tekstowy został zastąpiony przez graficzny interfejs użytkownika. Obecnie zdecydowana większość aplikacji dostępna jest również na urządzania mobilne, gdzie komunikacja z użytkownikiem w głównej mierze opiera się o interfejs graficzny.

Chcąc stworzyć doby interfejs graficzny aplikacji należy przeanalizować następujące aspekty jej działania:

  • Kim będą użytkownicy aplikacji? – wygląd i interakcja z użytkownikiem będzie inna dla dzieci, młodzieży czy seniorów, inaczej wyglądają aplikacje kierowane do nastolatków, inaczej dla klientów biznesowych

  • W jaki sposób nasza aplikacja będzie wykorzystywana? Inaczej korzysta się z aplikacji korzystając z komputera wyposażonego w klawiaturę i myszkę, inaczej na telefonie z niewielkim dotykowym ekranem. Coś, co jest wygodne na dużym ekranie nie musi być wygodne i dostępne na mniejszym wyświetlaczu.

  • Jakie treści będą prezentowane w naszej aplikacji? Biorąc pod uwagę, jakie dane nasza aplikacja będzie prezentować użytkownikowi można zastosować różne metody jej prezentacji – inaczej wyglądać będzie katalog produktów w sklepie internetowym, a inaczej prezentowane będą dane dotyczące przepływów finansowych.

Bardzo często interfejs urządzenia czy aplikacji jest kluczowy w jej postrzeganiu przez odbiorców i może zadecydować o sukcesie lub porażce danego produktu na rynku. Doskonałym przykładem są projekty systemów obsługujących telefony dotykowe w roku 2007 - czasie premiery przełomowego urządzenia, jakim był telefon iPhone firmy APPLE. Poniżej prezentowane są interfejsy systemów Windows Mobile oraz iPhone OS (obecnie iOS). Pierwszy z nich zawiera kilka tekstowych skrótów na pulpicie oraz znana z systemów Windows Menu Start, drugi komunikuje się z użytkownikiem przy pomocy kolorowych ikon. Dodatkowo do interfejsu dotykowego telefonu wprowadzono bardzo naturalne gesty pozwalające na wykonywanie różnych operacji, które bardzo przyspieszyły obsługę urządzania i poszczególnych aplikacji.

 Ekran systemu Windows Mobile 6.5

Ekran systemu Windows Mobile 6.5

https://en.wikipedia.org/wiki/Windows_Mobile#/media/File:Winmo65.PNG

 Ekran systemu iPhone OS

Ekran systemu iPhone OS (obecnie iOS)

W zależności od przyjętej technologii tworzenia aplikacji wykorzystywany może być interfejs systemu operacyjnego w przypadku aplikacji dedykowanych lub interfejs oparty o język HTML w przypadku aplikacji www (aplikacji uruchamianych, jako strony internetowe dostępne przez przeglądarkę internetową).

W przypadku aplikacji www interfejs definiowany jest w języku HTML wraz ze stylami CSS.

Programowanie aplikacji graficznych przeznaczonych dla konkretnego systemu operacyjnego opiera się na programowaniu obiektowym – poszczególne elementy interfejsu w kodzie źródłowym posiadają reprezentujące je obiekty, których własności określać mogą np. wygląd elementu (np. dla przycisku mogą określać jego rozmiar, wyśrodkowanie, pozycje na ekranie czy napis), natomiast metody określają działanie, które ma zostać wykonane w przypadku zaistnienia określonego zdarzenia (np. zmiany treści czy naciśnięcia przycisku).

Pomimo różnic w sposobie generowania interfejsu graficznego podstawowe elementy interfejsu graficznego są takie same – są używane zarówno w aplikacjach używanych na komputerach, tabletach oraz telefonach – nie występują w aplikacjach na zegarki (ang. smartwatch) - ze względu na ograniczenia związane z wielkością ekranu interfejs opiera się głównie o ikony.

Do najczęściej wykorzystywanych elementów interfejsu graficznego należą:

Etykieta tekstowa (ang. Label) – Tekst wypisany na ekranie

Pole tekstowe używane na stronie www

 Pole tekstowe w systemie MacOS

Pole tekstowe w systemie MacOS

 Pole tekstowe wraz z etykietą w systemie Windows

Pole tekstowe wraz z etykietą w systemie Windows

 Pole tekstowe używane w systemie Android

Pole tekstowe używane w systemie Android

 Pole tekstowe używane w systemie iOS />

Pole tekstowe używane w systemie iOS

Pole tekstowe (ang. Text Box) – najczęściej jednoliniowe pole, w którym można wprowadzać tekst przetwarzany przez program. W zależności od środowiska programistycznego istnieć mogą różne rodzaje pól tekstowych, np. zawierające maski wprowadzania danych pozwalających wprowadzać dane tylko w określonym formacie, pola pozwalające na wybór dat, pola tekstowe z elementami zwiększania lub zmniejszania wartości czy pola wprowadzania hasła.

Obszar tekstu używany na stronie www

 Obszar tekstu w systemie Windows

Obszar tekstu w systemie Windows

 Obszar tekstu w systemie iOS

Obszar tekstu w systemie iOS

 Obszar tekstu w systemie Android

Obszar tekstu w systemie android

Obszar tekstu (ang. Text Area) – pole, w którym można wprowadzać dane tekstowe zawierające więcej niż jedną linię tekstu

Lista wyboru używana na stronie www

 Lista wyboru używana w systemie MAC OS X

Lista wyboru używana w systemie MAC OS X

 Lista wyboru używana w systemie Android

Lista wyboru używana w systemie Android

 Lista wyboru używana w systemie iOS

Lista wyboru używana w systemie iOS

 Lista wyboru używana w systemie Windows

Lista wyboru używana w systemie Windows

Lista wyboru (ang. Select List) – Lista rozwijana pozwalająca wybrać jedną (lub kilka) z dostępnych opcji.

Opcje jednokrotnego wyboru używane na stronach WWW

  Opcje jednokrotnego wyboru używane w systemie MAC OS X

Opcje jednokrotnego wyboru używane w systemie MAC OS X

 Opcje jednokrotnego wyboru używane w systemie Windows

Opcje jednokrotnego wyboru używane w systemie Windows

 Opcje jednokrotnego wyboru używane w systemie iOS

Opcje jednokrotnego wyboru w systemie iOS

 Opcje jednokrotnego wyboru używane w systemie Android

Opcje jednokrotnego wyboru w systemie Android

Przyciski opcji jednokrotnego wyboru (ang. Radio Button) – przyciski pozwalające wskazać jedną z dostępnych opcji.

Pola wielokrotnego wyboru na stronach www

Pola wielokrotnego wyboru w systemie Windows

Pola wielokrotnego wyboru w systemie Windows

Pola wielokrotnego wyboru w systemie iOS

Pola wielokrotnego wyboru w systemie iOS

Pola wielokrotnego wyboru w systemie Android

Pola wielokrotnego wyboru w systemie Android

Pola wielokrotnego wyboru w systemie MAC OS X

Pola wielokrotnego wyboru w systemie MAC OS X

Przyciski opcji wielokrotnego wyboru (ang. Check Box) przyciski pozwalające wskazać wiele z dostępnych opcji.

Przycisk używany na stronach www

Przycisk używany na w systemie iOS

Przycisk używany na w systemie iOS

Przycisk używany na w systemie Android

Przycisk używany na w systemie Android

Przycisk używany na w systemie Windows

Przycisk używany na w systemie Windows

Przycisk używany na w systemie MacOS X

Przycisk używany na w systemie MacOS

Przycisk (ang. Button) to element uruchamiający akcje po jego kliknięciu.

Obszar obrazu (ang. Canvas) – obszar, w którym można załadować, wyświetlać lub generować obrazy.

Istnieją też elementy typowe dla aplikacji uruchamianych bezpośrednio w systemie operacyjnym takie jak:

Okno (ang. Form) – okno aplikacji, na której zamieszczone są inne elementy interfejsu graficznego.

Okno w systemie Windows

Okno w systemie Windows

Okno w systemie MAC OS X

Okno w systemie MAC OS X

 Przyciski sterowania oknem w systemie Windows

Przyciski sterowania oknem w systemie Windows

 Przyciski sterowania oknem w systemie MAC OS X

Przyciski sterowania oknem w systemie MAC OS X

Przyciski sterujące oknem  (ang. Minimize button, maximize buton , close button) przyciski znajdujące się na górnym pasku okna pozwalające na jego zminimalizowanie, maksymalizację oraz zamknięcie

 Paski przewijania Paski przewijania

Paski przewijania (ang. Scroll Bar) – paski pozwalające na przesunięcie zawartości okna, dzięki czemu użytkownik widzi na ekranie interesujący go fragment przetwarzanych czy wyświetlanych danych

Większość elementów graficznych potrafi obsługiwać następujące zdarzenia:

Kliknięcie (ang. click) – uruchomienie kodu źródłowego w momencie kliknięcia przycisku myszy lub naciśnięcia elementu na ekranie dotykowym.

Podwójne klikniecie (ang. double Click) - uruchomienie kodu źródłowego w momencie podwójnego kliknięcia przycisku myszy lub podwójnego naciśnięcia elementu na ekranie dotykowym.

Zmiana (ang. Change) - uruchomienie kodu źródłowego w momencie zmiany wartości danego elementu (np. wybrania innej wartości opcji, czy wprowadzenie tekstu do pola tekstowego).

Otrzymanie kursora tekstowego (ang. Focus) - uruchomienie kodu źródłowego w momencie, kiedy kursor tekstowy pojawi się wewnątrz danego elementu (np. w momencie przechodzenia pomiędzy kolejnymi polami tekstowymi).

Opuszczenie kursora tekstowego (ang. Blur) - uruchomienie kodu źródłowego w momencie, kiedy kursor tekstowy opuszcza dany element (np. w momencie przechodzenia pomiędzy kolejnymi polami tekstowymi).

Wejście kursora myszy (ang. mouse over) - uruchomienie kodu źródłowego w momencie, kiedy kursor myszy pojawia się ponad danym elementem.

Wyjście kursora myszy (ang. Mouse out) - uruchomienie kodu źródłowego w momencie, kiedy kursor myszy przesunie się poza dany element.

Naciśnięcie klawisza (ang. Key down) - uruchomienie kodu źródłowego w momencie, kiedy naciskany jest klawisz na klawiaturze  przed wyświetleniem/przekazaniem określonego znaku.

Przytrzymanie klawisza (ang. Key press) - uruchomienie kodu źródłowego w momencie, kiedy naciskany jest klawisz na klawiaturze po wyświetleniu/przekazaniu określonego znaku

Zwolnienie klawisza (ang. Key Up) - uruchomienie kodu źródłowego w momencie, kiedy klawisz na klawiaturze jest zwalniany.

W zależności od używanego środowiska dostępne są różne zdarzenia wywołujące kod źródłowy, które mogą obsługiwać m.in. zmiany rozmiaru, przesunięcie elementu, przesunięcie obszaru przy użyciu paska przewijania itp.

Dla okien czy stron kolejnych ekranów aplikacji najczęściej dostępne są zdarzenia obsługujące załadowanie/wczytanie danego elementu, jego wyświetlenie na ekranie oraz ukrycie.

Przykładowa aplikacja pozwalająca na operacje matematyczne na dwóch liczbach może składać się z następujących elementów:

  • Pole tekstowe o nazwie Liczba1TextBox

  • Pole wyboru o nazwie OperacjaSelect składające się z następujących opcji: +, -, * /

  • Pole tekstowe o nazwie Liczba2TextBox

  • Przycisk o nazwie ObliczButton

  • Etykieta o nazwie WynikLabel

Przykładowe ułożenie elementów może wyglądać następująco:

 ułożenie elementów

Tworząc aplikację poza samym obliczeniem wyniku, warto stworzyć dodatkowe funkcjonalności polegające na sprawdzeniu danych wejściowych (np. aby dopuszczać wyłączenie wartości tekstowe, czy też w przypadku wybrania działania dzielenia sprawdzania czy wartość drugiej liczby jest różna od 0).

Przy założeniu, że biblioteka graficzna zawiera obsługę standardowych elementów graficznych (zdefiniowanych jako klasy bazowe) używając dziedziczenia istnieje możliwość zdefiniowania własnych klas odpowiedzialnych za wyświetlanie i obsługę konkretnych elementów graficznych dopasowanych do naszych potrzeb. Przykładowy kod źródłowy takich klas odpowiedzialnych za obsługę powyższego formularza może wyglądać następująco:

Class Liczba1TextBoxClass : TextBoxClass{ //deklaracja klasy o nazwie Liczba1TextBoxClass jako klasa pochodna od klasy TextBoxClass function Liczba1TextBoxClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { this.left =0; //przypisanie właściwości odpowiadającej pozycji X na ekranie. this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie. this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu. this.width=200; //przypisanie właściwości odpowiadającej szerokości obiektu return true; } function OnKeyPress() //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza { if (this.key<’0’ and this.key>’9’) //sprawdzenie czy naciśnięto klawisze z poza zakresu 0..9 { alert(‘To pole może przyjmować tylko wartości tekstowe’); //wywołanie funkcji wywołujące okno ostrzeżenia. return false; } return true; } } Class Liczba2TextBoxClass : TextBoxClass{ //deklaracja klasy o nazwie Liczba2TextBoxClass jako klasa pochodna od klasy TextBoxClass function Liczba2TextBoxClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { this.left =320; //przypisanie właściwości odpowiadającej pozycji X na ekranie. this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie. this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu. this.width=200; //przypisanie właściwości odpowiadającej szerokości obiektu return true; } function OnKeyPress() //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza { if (this.key<’0’ and this.key>’9’) //sprawdzenie czy naciśnięto klawisze z poza zakresu 0..9 { alert(‘To pole może przyjmować tylko wartości tekstowe’); //wywołanie funkcji wywołujące okno ostrzeżenia. return false; } return true; } } Class OperacjaSelectClass : SelectClass{ //deklaracja klasy o nazwie OperacjaSelectClass jako klasa pochodna od klasy SelectClass function OperacjaSelectClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { this.left =220; //przypisanie właściwości odpowiadającej pozycji X na ekranie. this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie. this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu. this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu this.options[]=[’+’]; //przypisanie kolejnej wartości wyboru na liście this.options[]=[’-’]; //przypisanie kolejnej wartości wyboru na liście this.options[]=[’*’]; //przypisanie kolejnej wartości wyboru na liście this.options[]=[‘/’]; //przypisanie kolejnej wartości wyboru na liście return true; } } Class ObliczButtonClass : ButtonClass{ //deklaracja klasy o nazwie ObliczButton jako klasa pochodna od klasy ButtonClass function ObliczButtonClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { this.left =440; //przypisanie właściwości odpowiadającej pozycji X na ekranie. this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie. this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu. this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu this.text=’='; //przypisanie właściwości odpowiadającej napisowi na przycisku return true; } function OnClick () //deklaracja funkcji obsługującej zdarzenia naciśnięcia klawisza { if ((OperacjaSelect.GetValue()==’/’)and Liczba2TextBoxClass.GetValue()==0)) //sprawdzenie czy wartość wybrana w obiekcie OperacjaSelect to dzielenie oraz czy wartość wprowadzona w obiekcie Liczba2TextBox wynosi 0 { alert (‘Dzielenie przez 0 nie jest dozwolone’); return false; } else { swith (OperacjaSelect.GetValue()) { case :’+’ wynik= Liczba1TextBoxClass.GetValue()+Liczba2TextBoxClass.GetValue(); break; case :’-‘ wynik= Liczba1TextBoxClass.GetValue()-Liczba2TextBoxClass.GetValue(); break; case :’*’ wynik= Liczba1TextBoxClass.GetValue()*Liczba2TextBoxClass.GetValue(); break; case :’/’ wynik= Liczba1TextBoxClass.GetValue()/Liczba2TextBoxClass.GetValue(); break; } WynikLabel.SetLabel(‘Wynik działania wynosi’+wynik); return true; } } } Class WynikLabelClass : LabelClass{ //deklaracja klasy o nazwie WynikLabelClass jako klasa pochodna od klasy LabelClass function WynikLabelClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { this.left =540; //przypisanie właściwości odpowiadającej pozycji X na ekranie this.top =0; //przypisanie właściwości odpowiadającej pozycji Y na ekranie this.height=20; //przypisanie właściwości odpowiadającej wysokości obiektu this.width=80; //przypisanie właściwości odpowiadającej szerokości obiektu this.value=’Wynik’; //przypisanie własności odpowiadającej wyświetlanemu tekstowi return true; } } Class MainProgramClass : WindowClass{ //deklaracja klasy o nazwie OperacjaSelectClass jako klasa pochodna od klasy SelectClass function MainProgramClass () //deklaracja konstruktora obiektu – funkcja nazywana tak samo jak klasa, której zadaniem jest przypisanie własności klasy. { Liczba1TextBox = new Liczba2TextBoxClass; //utworzenie nowego obiektu klasy Liczba1TextBoxClass o nazwie Liczba1TextBox Liczba2TextBox = new Liczba2TextBoxClass; //utworzenie nowego obiektu klasy Liczba2TextBoxClass o nazwie Liczba2TextBox OperacjaSelect =new OperacjaSelectClass; //utworzenie nowego obiektu klasy OperacjaSelectClass o nazwie OperacjaSelect ObliczButton = new ObliczButtonClass; //utworzenie nowego obiektu klasy ObliczButtonClass o nazwie ObliczButton WynikLabel = new WynikLabelClass; //utworzenie nowego obiektu klasy WynikLabelClass o nazwie WynikLabel this.add (Liczba1TextBox); //dodanie do głównego okna programu obiektu Liczba1TextBox this.add (OperacjaSelect); //dodanie do głównego okna programu obiektu OperacjaSelect this.add (Liczba2TextBox); //dodanie do głównego okna programu obiektu Liczba2TextBox this.add (ObliczButton); //dodanie do głównego okna programu obiektu ObliczButton this.add (WynikLabel); //dodanie do głównego okna programu obiektu WynikLabel return true; } }

Program główny obsługujący obsługę wszystkich elementów interfejsu graficznego będzie działał, jako obiekt MainProgram, który w funkcji inicjującej (konstruktorze) utworzy kolejne obiekty odpowiedzialne za wyświetlanie i obsługę pól tekstowych, listy wybieralnej oraz przycisku.

Poprzedni rozdział Następny rozdział