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

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

Prototypowanie jako środek wytwarzania (implementacji) projektu wizualnego Analiza Projekt Wizualny Prototyp Zrealizowany System Z http://www.blender.pl/cpg/albums/userpics/10505/normal_carprototypeconcept1b.jpg 2

Prototypowanie Definicja: środek do analizy, testowania pewnych koncepcji przed zainwestowaniem w nie kapitału. Cel: Oszczędzić czas i pieniądze Prototyp stanowi tylko fasadę rzeczywistego systemu Ale można na niej wykonać właściwe testy użyteczności. Główne motywy tworzenia prototypu GUI: potwierdzenie różnych koncepcji, specyficznych cech systemu zbadanie projektu (również przy pomocy testów na różnym poziomie) zbadanie aspektów technicznych (weryfikacja możliwości realizacji projektów wizualnych przez warstwę prezentacji systemu przy wykorzystaniu dostępnych technologii) 3

Prototyp Ile inwestować czasu i pieniędzy? W prototypie uwzględniaj tylko to co jest niezbędne. Nie działające przyciski lub pozycje menu nie są problemem. Dopóki prototyp w miarę wiernie oddaje interakcję stosuj wszelkie zasłony dymne oraz oszustwa. Koszt budowy musimy minimalizować koszt budowy prototypu potrzebnego do zbadania projektu, Ograniczenie czasu życia powinniśmy jednoznacznie określić do którego etapu będziemy używać prototypu, (np.: prezentacja na spotkaniu zespołu, prezentacja na szczeblu zarządzającym projektu, weryfikacja specyfikacji, test użyteczności) Ryzyko przytłoczenia odbiorców prezentacja zbyt wyszukanego i złożonego prototypu jest bardzo ryzykowna zarówno przed własnym zespołem jak i klientem. 4

Prototyp Zasięg Co należy rozważyć tworząc prototyp? Potrzeby klienta Analiza testów użyteczności Konsultacje z własnym zespołem Szerokość kontra głębokość (stopień wgłębiania się w szczegóły) Wireframe kontra projekt wizualny ROI: Return on Investment YP T O T O R P Z http://www.blender.pl/cpg/albums/userpics/10505/normal_carprototypeconcept1b.jpg Twórz elastyczne prototypy Gdzie powinien znajdować się pasek narzędzi? Ile elementów powinien zawierać statyczny pasek nawigacji? Prototyp na pewno nie jest wersją Beta produktu... 5

Prototypowanie Narzędzia i technologie Low fidelity (mało wierne) papierowe szkice Wykorzystanie języków skryptowych html, Python, Ruby itp... Wykorzystanie specjalistycznych narzędzi do prototypowania GUI: Cleverlance Petra (http://petra.cleverlance.com/) Axure RP Pro (http://www.axure.com/) GUI Design Studio (Carreta http://www.carettasoftware.com/gds/index.html) Mockup Screens (http://mockupscreens.com/) przegląd narzędzi: (http://c2.com/cgi/wiki?guiprototypingtools) Wykorzystanie narzędzi do budowania GUI środowiska zintegrowane. Qt Designer, Visual Basic (lub teraz MS.Visual Studio), Netbeans, Delphi, PowerBuilder, Glade i wiele innych. 6

Szkice papierowe http://www.snyderconsulting.net/images/paperprototyping/fig_1.gif 7

Szkice papierowe http://www.gdoss.com/images/lmf_paper_prototype.gif 8

Prototyp papierowy http://www2.warwick.ac.uk/services/its/servicessupport/web/blogs/about/usability/paper/ 9

Mockup Screens Narzędzie wspomagające proces prototypowania Skoncentrowane na prototypowaniu (czyli wygodne w użyciu) Zorganizowane zarządzanie ekranami, widokami (jak w narzędziu CASE) Możliwość generowania notatek, uwag do konkretnych elementów widoku (przydatne zwłaszcza podczas sesji z klientem) Możliwość prezentacji przykładowych danych Możliwość tworzenia gotowych prezentacji jako scenopisów do scenariuszy przypadków użycia 10

Mockup Screens Zrzuty ekranu 1 / 5 11

Petra przegląd właściwości Proste narzędzie CASE umożliwiające zarządzanie prototypem. Tworzenie szablonów stron i widoków Zarządzanie nawigacją miedzy stronami Eksport do interaktywnego prototypu Strona: http://petra.cleverlance.com/ 16

Prototypowanie w HTMLu Jedną z głównych zalet prototypowania w HTML jest możliwość szybkiego modelowania przepływów między widokami za pomocą: przycisków submit, zwykłych hyperlinków. 17

Wireframing Podstawowa idea stojąca za wireframingiem, layoutowaniem ( układowaniem ): Separacja treści od układu i prezentacji Projekt graficzny Wykorzystaj układ strony do sygnalizacji przebiegu interakcji Zgrupuj ze sobą elementy związane kontekstem Nielsen: Przetestuj czy strona z zawartością jest bardziej użyteczna dzięki różnym układom? Jakie elementy powinien zawierać szablon strony, serwisu, formularza? 18

Wireframing układ treści Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/ 19

Wireframing układ treści Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/ 20

Typowy Układ Serwisu (Layout) 21

Wireframing - Schemat układu (Layout'u) 22

Dreamweaver pionier wireframingu 23

Dreamweaver - wireframing 24

Wireframing wynik w Firefoxie 25

Znowu bankomat...? Dreamweaver Firefox 26

Znowu bankomat...? Dreamweaver Firefox 27

Znowu bankomat...? Dreamweaver Firefox I tak dalej... 28

Układy stron internetowych - wtręt Uwagi ogólne: Tradycyjnie układ strony był zakodowany za pomocą tabel lub ramek. Uwaga! Należy unikać ramek, gdzie to tylko możliwe: utrudniają zakładki (ulubione, ang. bookmark) i nawigację! Arkusze styli: Nowoczesne serwisy wykorzystują arkusze styli. Separacja treści od układu/prezentacji: CSS (style) 29

CSS skryptowe narzędzie do wireframingu Dwa typowe znaczniki: div i span Stworzymy prosty układ strony: lewypanel prawypanel tresc Zapamiętamy na stronie za pomocą tagu div: <html> <head> <style type="text/css">... </style> </head> <body> <div id="lewypanel"></div> <div id="prawypanel"></div> <div id="tresc"></div> </body> </html> 30

Pozycjonowanie / Układ - CSS Wykorzystanie CSS do prototypowania, jako wygodnego narzędzia, do tworzenia układów. #lewypanel { position : absolute; left : 0; width : 150px; margin-left : 10px; margin-top : 20px; color : #000000; padding : 3px; background-color: #99CCCC height : 300px; } #tresc { top : 0px; margin : 0px 25% 0 165px; padding : 3px; color : #000000; background-color: #FFFF99; } #prawypanel { position : absolute; left : 80%; top : 20px; width : 140px; padding-left : 10px; z-index : 3; color : #000000; padding : 3px; background-color: #99CC99 } 31

Tworzenie formularzy ½ - Użyteczność Często zapominamy o specjalnych znacznikach: <label for= id-in >Opis</label><input type= text id= id-in > <label>email: <input type="text" id="email"></label> (kliknięcie na napisie przeniesie kursor do odpowiedniej kontrolki) fieldset oraz legend (pozwalają grupować powiązane ze sobą elementy) 32

Tworzenie formularzy 2/2 - Użyteczność Tabindex (atrybut elementów formularza wskazujący w jakiej kolejności ma być przełączany kursor przy wciśnięciu klawisza TAB) 33

Zadanie samodzielne - Wycieczka 34

Zadanie wycieczka: Treść Napis Obowiązkowe: zamienić na symbol * przy opisie dotyczącym pola. Pogrupować tematycznie elementy formularza. Należy użyć do tego ramek (frameset) (np. Parametry wycieczki (dojazd,pobyt), Koszty, Informacje o zamawiającym). Obok pól edycyjnych wymagających odpowiedniego formatu wpisać przykład lub wymusić maskę (do drugiego trzeba zaimplementować w JavaScript). Listę wyboru (select) zastąpić kilkoma checkboxami. (Trudne CTRL) Checkboxy powinny być po lewej stronie opisu tak jak w standardzie. Pola RADIOBUTTON najlepiej zamknąć w ramce. Dodać numery kroków w jakich człowiek powinien wprowadzać dane, w ten sposób będzie wiedział na jakim mniej więcej jest etapie. Zaprezentować graficznie Podsumowanie cen posiłków w innej formie. (np. Uzyć atrybutu disabled) Takiej, która nie będzie sugerowała użytkownikowi, że może coś w tym polu wpisać. Wyraźniejsze przyciski Wyślij i Anuluj (Czy anuluj jest w ogóle potrzebny?) Ilość osób: Liczba osób. Liczba osób zamienić na: Dorośli, Dzieci, Seniorzy, Niemowlęta. 35

Do przeanalizowania W jakiej kolejności człowiek wprowadza dane. Można zbudować kreator, który pozwoli człowiekowi wybrać odpowiednie parametry wycieczki? Na pewno niektóre wycieczki nie będą udostępniały Wszystkich preferowanych wariantów wycieczek, a kreator umożliwi filtrację. Kreator mógłby być zbudowany ze stron: Strona 1: Koszty wycieczki. (tutaj marketing może zdominować użyteczność i ten krok często jest umieszczany na końcu procesu :-) ) Strona 2: Wybór parametrów wycieczki. Strona 3: Szczegółowy wybór na podstawie ofert spełniających kryteria. Strona 4: Wprowadzenie danych osobowych. Strona 5: Podsumowanie wprowadzonych parametrów i umożliwienie ich zatwierdzenia. 36

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 37