GUI - projektowanie interfejsów - Przemysław Juszczuk · dostępne będą online. ... edytory...

GUI - projektowanie interfejsów

dr Przemysław Juszczuk

Katedra Inżynierii Wiedzy, Uniwersytet Ekonomiczny w Katowicach

Wykład 1

dr Przemysław Juszczuk GUI - projektowanie interfejsów

e-mail: [email protected]

pjuszczuk.pl


Warunki zaliczenia

Test z części teoretycznej (materiały z wykładów);Projekt realizowany podczas ćwiczeń (możliwa praca w grupie2-osobowej);Szczegóły projektu podane będą z wyprzedzeniem wraz z dokładnymopisem wymagań.Termin zdania projektu ustalany będzie na zajęciach.Materiały z wykładów oraz ćwiczeń wraz z opisem projektówdostępne będą online.


Zakres przedmiotu

Wprowadzenie - gry i narzędziaInterfejsy użytkownikaUżytkownik a interfejsDiagramy UML i diagramy Windows Navigation DiagramPrototypowanieTyfloinformatykaUnityAndroid Studio


Gry i narzędzia

Narzędzia

narzędzia graficzne - przygotowanie elementów graficznych (np.tekstury), np. GIMP do obróbki grafiki rastrowej (AdobePhotoshop), InkScape do obróbki grafiki wektorowej (AdobeIllustrator), Tiled - edytor do tworzenia poziomów (tzw. kafelki),MakeHuman - darmowe narzędzie do generowania siatekhumanoidalnych (animacja postaci w połączeniu ze szkieletem imodelem RigidBody).oprawa dźwiękowa - edytory dźwięku takie jak Audacity, generowaniedźwięków akcji (atak, uderzenie w ścianę) - SFXR, lub mikrofon +nagrywanie.


Unreal Engine

pierwsza wersja (mechanizm renderowania, system wykrywaniakolizji, system sztucznej inteligencji) - 1998 rok (gra Unreal);Unreal Tournament - wersja 1.5 (1999r.);Aktualna wersja 4, a od 2015 roku silnik jest darmowy (opróczprodukcji komercyjnych, które zarobią powyżej 3 tys dolarów).


Doom Engine

pierwsza wersja stworzona przez Id Software na potrzeby gry Doom(1993 rok);od 1999 roku kod silnika opublikowany został na licencji darmowej;silnik doczekał się wielu modyfikacji dotyczących np. obsługiOpenGL.

Quake Engine

silnik opracowany w 1996 roku (na potrzeby gry Quake);jeden z pierwszych silników posiadających grafikę 3Dprzygotowany przez Johna Carmacka (ten sam, który napisał silnikDoom Engine).


Narzędzia graficzne - Blender

Blender jako darmowa alternatywa dla Photoshopa;Wsparcie dla obliczeń GPU;modelowanie;przygotowanie modelu i przekształcenie w postać (szkielet iporuszanie się);rzeźbienie w materiałach;symulacje (woda, dym, włosy, ubranie);efekty cząsteczkowe jak deszcz, czy iskry;kamera i śledzenie obiektów;zestawy dodatkowych bibliotek;gotowe projekty, matriały, modele.


Rysunek: Blender (źródło: oficjalna strona Blender)


Rysunek: Blender (źródło: oficjalna strona Blendera)


Rysunek: SFXR


Da się przygotować coś bez złożonej grafiki?

gry niezależne (indie games, indyki) - tworzone przez mały zespół/jedną osobę bez wsparcia finansowego;ze względu na ograniczone koszty - często brak fizycznego nośnika;Podstawowym atutem jest innowacyjność (Minecraft).


Rysunek: Minecraft


Gry retro a grafika retro

gry nieco starsze - najczęściej z lat 1980;gry w stylu retro - (Hotline miami, Fez, Super meatboy) - nowe gry,w których stosowana jest grafika w stylu retro;ograniczona paleta kolorów;skalowanie pikseli (w celu wyraźnego zaznaczenia poszczególnychpikseli): jeden piksel to np. siatka 10 na 10 pikseli;


Rysunek: Piksele i sztuczne zwiększenie wielkości piksela w wyższejrozdzielczości


Unity 3D - gry

Pillars of Eternity;Deus Ex;Might and Magic X;Slender;

Unity 3D - ogólnie

zintegrowane środowisko do tworzenia gier 2D, 3D oraz materiałówinteraktywnych;wieloplatformowość - Windows, Linux, Mac, apki mobilne, konsole;możliwość pisania skryptów w trzech językach: C#, UnityScript(JavaScript), Boo (inspirowany Pythonem).


Interfejs użytkownika

dobry projekt interfejsu jest warunkiem niezbędnym powodzeniasystemu;interfejs trudny w użyciu/posiadający liczne błędy w najlepszymwypadku doprowadzi do wielu pomyłek;w najgorszym wypadku użytkownicy mogą odmówić jego używaniapomimo jego dobrej funkcjonalności;użytkownicy mogą mieć problemy z użytkowaniem systemu, jeżeliprzedstawine w nim informacje są błędne/niespójne.


Właściwości graficznego interfejsu

okna - umożliwiają wyświetlanie informacji;ikony - reprezentują różnego rodzaju informacje;menu - obiekty umożliwiające wybranie określonej funkcji systemu;wskazywanie - możliwość wyboru konkretnego elementu z menu;grafika - elementy graficzne mogą zostać połączone z informacjamitekstowymi.


Rysunek: Proces projektowania interfejsu


Ogólna charakterystyka użytkownika

Dane podstawowe: wiek, poziom wykształcenia;Klasyfikacja: przynależność organizacyjna, doświadczenie iumiejętności;Preferencje i uprzedzenia użytkownika;Cel korzystania z systemu;Podział na role w systemie;Scenariusze zadań dostępne dla każdej roli w systemie.


Rodzaje interakcji z użytkownikiem

działanie bezpośrednie - użytkownik porozumiewa się bezpośrednio zobiektami - np. przeciągnięcie pliku do kosza;wybór z menu - wybór jednej z opcji dostępnych w obiekcie menu;wypełnienie formularza - wypełnienie pól/odpowiedź na pytaniaprowadzi do pewnej akcji;język poleceń - wydawanie specjalnych poleceń (wraz zparametrami) umożliwiających podjęcie akcji systemu;język naturalny - wydawanie poleceń w języku naturalnym.


Rysunek: Podstawowy podział interfejsów


Podstawowe zasady projektowania interfejsu

Wygląd - interfejs powinien być podzielony na obszary przeznaczonedo różnych celów;Uświadamianie zawartości - interfejs powinien uświadamiaćużytkownika, w którym miejscu się znajdują i co oznaczająposzczególne elementy;Estetyka - równowaga pomiędzy funkcjonalnością a czytelnością;Doświadczenie użytkownika - uwzględnienie możliwości obsługi przezpoczątkującego oraz zaawansowanego użytkownika;Spójność - interfejs powinien umożliwiać użytkownikowiprzewidywanie skutków podejmowanych działań;Minimalizacja wysiłku - ograniczenie liczby kroków wiodących docelu do minimum.


Zasady projektowania interfejsu II

zasada zbliżenia do użytkownika - użytkownik nie powinien byćzmuszony do adaptowania się do systemu;potwierdzanie akcji destrukcyjnych;zapewnienie możliwości anulowania - czyli przywrócenia stanusystemu sprzed wykonania polecenia;


Czynniki określające funkcjonalność - projektowanie

czynniki ludzkie - wpływ stresu, zmysły człowieka, proceszapamiętywania i zapominania;interakcja HCI - Human Computer Interaction - zagadnieniazwiązane z logiką i funkcjonalnością parametrów, korzystanie zoperacji we/wy, ergonomia korzystania z komputera;Projektowanie zorientowane na użytkownika - nie opiera się nazasadzie ”klient ma zawsze rację”.


Rysunek: MVC dla interakcji z użytkownikiem


Rysunek: Przykładowa strona z podziałem na obszar nawigacyny


Zasady podziału

każdy obszar interfejsu powinien mieć jasno wytyczone granice;każdy obszar powinien mieć określone przeznaczenie;każdy obszar powinien zawierać informacje potrzebne do realizacjiwybranego zadania;obszary informacyjne powinny być uszeregowane w kolejnościprzetwarzania informacji przez użytkownika;


Uświadamianie zawartości

wszystkie okna oraz sekcje powinny mieć tytuły jednoznacznieidentyfikujące ich zawartość;menu powinno pokazywać ścieżkę - wskazywać sposób, w jakiużytkownik dostał się do danego punktu;przyciski powinny mieć napis jednoznacznie identyfikujący ichfunkcje;forma informacji na sąsiadujących obszarach powinna być różna, np.tekst - grafika;jeżeli informacje nie są różne - powinny być oddzielone dodatkowymelementem;każde pole edycji musi mieć etykietę jednoznacznie identyfikującą topole;pola edycji, których format nie jest oczywisty (np. data) muszą miećdodatkowe oznaczenie formatu;


Estetyka

interfejs powinien być funkcjonalny oraz mieć przyjemny wygląd;ilość wolnego miejsca pomiędzy elementami powinna być zależna oddoświadczenia użytkownika - im mniej doświadczenia, tym więcejwolnego miejsca;należy unikać tworzenia dużych raportów i formularzy (kilkadziesiątpól);tekst główny prezentowany czcionką 8-10 pkt;należy unikać stosowania dwóch różnych czcionek. Zdecydowanieunikać stosowania czcionek ozdobnych;stosowane kolory powinny być stonowane i nie powinny ”męczyć”oka;kolor nie może być jedynym wyróżnikiem informacji.


Doświadczenie użytkownika a interfejs

interfejs powinien być na tyle łatwy, aby początkujący użytkownikbył w stanie go opanować;interfejs powinien ułatwiać i przyspieszać wykonywanie działaćzaawansowanych użytkowników;menu powinno prezentować wszystkie dostępne funkcje;menu na każdym poziomie powinno być ograniczone i nie zawieraćnadmiarowych informacji;najczęściej stosowane opcje powinny być dostępne bezpośredniopoprzez przyciski narzędziowe;przyciski powinny być logicznie pogrupowane;w przypadku bardziej złożonych aplikacji wskazane jest umożliwienieużytkownikowi konfiguracji paska menu;system podpowiedzi i skrótów klawiszowych dla bardziej złożonychaplikacji;


Spójność

interfejs powinien być spójny dla zapewnienia przewidywalnościpodejmowanych działań przez użytkownika;wszystkie elementy: raporty i formularze powinny byćzaprojektowane w jednolity sposób;jeżeli dana aplikacja powiązana jest z innymi narzędziami - towszystkie powiązane elementy powinny być spójne.


Minimalizacja wysiłku

interfejs powinien być przygotowany tak, aby minimalizować wysiłekużytkownika włożony w wykonanie czynności;3 kliknięcia - czyli zalecana maksymalna liczba kliknięć służąca dowybrania interesującej użytkownika funkcji;dla bardziej złożonych aplikacji zaleca się łączenie kilku funkcji wjedną.


Dobór kolorów i schematów kolorów

można stosować intensywne kolory, ale nie intensywne;najlepiej, by kolory były do siebie dopasowane (np. niebieski i zielony,czerwony i żółty itp.) lub kontrastowe: bialy i czarny;kolor tła nie powinien być zbyt intensywny;tło musi być spokojne, najlepiej jednolite, ewentualnie zestopniowymi przejsciami koloru;stosowanie drobnych elementów i obiektów jako tła nie jest zalecane;niebieski jest bardziej ”prestiżowym” kolorem (podobnie jakwiększość chłodnych kolorów i fioletowy).


Dobór kolorów i schematów kolorów II

ograniczenie liczby stosowanych kolorów;zmiany kolorów do oznaczenia zmian stanów systemu;powiązanie kolorów z relizacją zadań - zadania podobne powinny byćpoznaczone kolorem podobnym;zwracanie uwagi na niektóre związki kolorów np. czerwony zniebieskim - które powodują szybkie zmęczenie oczu.


Rysunek: Projektowanie interfejsu


WND - Window Navigation Diagram

każdy element wykresu reprezentuje pojedynczy komponent - menulub formatkę;przejścia pomiedzy komponentami oznaczone są jako pojedyncza lubpodwójna strzałka;strzałka pojedyncza oznacza, że informacja zwrotna do komponentunadrzędnego nie jest potrzebna;każdy komponent opisany jest jako stereotyp, np. << form >>;każdy komponent ma etykietę.


Rysunek: Window Navigation Diagram WND


Storyboarding

koncepcja bazuje na rysowaniu na kartce/tablicy odręcznch szkicówinterfejsu wraz z ewentualnym zaznaczeniem przepływu pomiędzyfunkcjami;jedna z najłatwiejszych technik projektowania interfejsu;stosowana najczęściej do elementów, których działanie jest dobrzeznane;


Rysunek: Storyboarding


Prototypowanie HTML

zastosowanie języka HTML do opracowania prototypu interfejsu;istotną wadą jest fakt, iż opracowane elementy niekoniecznie pojawiąsię dokładnie w takim samym formacie, co końcowy produkt.


Prototypowanie językowe

opracowanie prototypu interfejsu w docelowym języku aplikacji;finalny produkt wizualnie będzie odpowiadał dokładnie elementom,które widoczne będą na ekranie;wadą tego podejścia jest znacznie większy nakład czasowywymagany do opracowania prototypu.


Ocena interfejsu

ocena heurystyczna - zgodność z zasadami;przegląd interfejsu z użytkownikiem;ocena interaktywna u użytkownika;formalne testowanie użyteczności.


Rysunek: Za dużo tekstu


Rysunek: Za mało tekstu


Rysunek: Niewielka funkcjonalność przy zbyt dużej liczbie opcji


Rysunek: Możliwość bezmyślnych działań użytkownika


Rysunek: Źle dobrane kolory


Dziękuję za uwagę


GUI - projektowanie interfejsów - Przemysław Juszczuk · dostępne będą online. ... edytory...

Documents

Transcript of GUI - projektowanie interfejsów - Przemysław Juszczuk · dostępne będą online. ... edytory...