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

Transkrypt

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

2 Prototypowanie jako środek wytwarzania (implementacji) projektu wizualnego Analiza Projekt Wizualny Prototyp Zrealizowany System Z 2

3 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 na której można 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

4 Prototyp Ile inwestować? W prototypie uwzględniaj tylko co jest niezbędne. Nie działające przyciski lub pozycje menu nie stanowią żadnego problemu. Dopóki prototyp wiernie oddaje interakcję stosuj wszelkie zasłony dymne oraz oszustwa. Koszt budowy poszukujemy minimalnego kosztu potrzebnego do zbadania projektu, Ograniczenie czasu życia musimy jednoznacznie określić do którego momentu 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

5 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 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

6 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 ( Axure RP Pro ( GUI Design Studio (Carreta Mockup Screens ( przegląd narzędzi: ( 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

7 Mockup Screens Zrzuty ekranu 1 / 5 7

8 Mockup Screens Zrzuty ekranu 2 / 5 8

9 Mockup Screens Zrzuty ekranu 3 / 5 9

10 Mockup Screens Zrzuty ekranu 4 / 5 10

11 Mockup Screens Zrzuty ekranu 5 / 5 11

12 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: 12

13 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. 13

14 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: Co może nam zakomunikować układ? Przetestuj czy strona z zawartością jest bardziej użyteczna dzięki różnym układom? Jakie elementy powinien zawierać szablon strony, serwisu, formularza? 14

15 Wireframing układ treści Żródło: 15

16 Wireframing układ treści Żródło: 16

17 Typowy Układ Serwisu (Layout) 17

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

19 Implementacja Układu Stron Internetowych 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) 19

20 Dreamweaver pionier wireframingu 20

21 Dreamweaver - wireframing 21

22 Wireframing wynik w Firefoxie 22

23 Znowu bankomat...? Dreamweaver Firefox 23

24 Znowu bankomat...? Dreamweaver Firefox 24

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

26 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> 26

27 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 } 27

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

29 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) 29

30 Zadanie - Wycieczka 30

31 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. 31

32 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. 32

33 Interakcja Dziękuję za uwagę. Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz a: Jeżeli coś cię bardzo znudziło napisz a: Jeżeli zauważyłeś błąd napisz a: 33