GUI - projektowanie interfejsów - Przemysław Juszczuk · dostępne będą online. ... edytory...
Transcript of 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
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Zakres przedmiotu
Wprowadzenie - gry i narzędziaInterfejsy użytkownikaUżytkownik a interfejsDiagramy UML i diagramy Windows Navigation DiagramPrototypowanieTyfloinformatykaUnityAndroid Studio
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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).
dr Przemysław Juszczuk GUI - projektowanie interfejsó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).
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Blender (źródło: oficjalna strona Blender)
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Blender (źródło: oficjalna strona Blendera)
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: SFXR
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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).
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Minecraft
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Piksele i sztuczne zwiększenie wielkości piksela w wyższejrozdzielczości
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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).
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Proces projektowania interfejsu
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Podstawowy podział interfejsów
dr Przemysław Juszczuk GUI - projektowanie 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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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ę”.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: MVC dla interakcji z użytkownikiem
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Przykładowa strona z podziałem na obszar nawigacyny
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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ą.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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).
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Projektowanie interfejsu
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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ę.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Window Navigation Diagram WND
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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;
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Storyboarding
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
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.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Ocena interfejsu
ocena heurystyczna - zgodność z zasadami;przegląd interfejsu z użytkownikiem;ocena interaktywna u użytkownika;formalne testowanie użyteczności.
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Za dużo tekstu
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Za mało tekstu
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Niewielka funkcjonalność przy zbyt dużej liczbie opcji
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Możliwość bezmyślnych działań użytkownika
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Rysunek: Źle dobrane kolory
dr Przemysław Juszczuk GUI - projektowanie interfejsów
Dziękuję za uwagę
dr Przemysław Juszczuk GUI - projektowanie interfejsów