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

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 Stanowi ona model interakcji użytkownika z systemem. 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 (prototyp biznesowy) zbadanie projektu np. przy pomocy testów na różnym poziomie (prototyp funkcjonalny) zbadanie aspektów technicznych np. poprzez weryfikację możliwości realizacji projektów wizualnych przez warstwę prezentacji systemu przy wykorzystaniu dostępnych technologii (prototyp techniczny) podniesienie jakości specyfikacji funkcjonalnych 3

Pytania w których ma pomóc Prototyp Dotyczące łatwości używania i nauki obsługi (prototyp funkcjonalny): Czy używanie prototypu jest intuicyjne? Czy typowy użytkownikowi udaje się osiągnąć cel zadania? Czy skutki skomplikowanych zadań są oczywiste? Czy interfejs jest prosty do nauki? Określenie wartości produktu przez klienta (prototyp biznesowy): Czy produkt jest warty inwestycji? Czy wymaga kosztownych szkoleń? Czy będzie wymagał częstych i/lub kosztownych uaktualnień? Czy potencjalni klienci pozytywnie oceniają oferowaną funkcjonalność? Wygląd i odbiór (prototyp estetyczny): Czy użytkownik produkt zwraca na siebie uwagę? Czy prezentacja danych jest czytelna? Czy użytkownicy z przyjemnością korzystają z produktu? 4

Prototyp Charakterystyka Co wpływa na proces tworzenia prototypu? Potrzeby klienta Potrzeby testów użyteczności (jeżeli prototyp ma być użyty podczas testów...) Konsultacje z własnym zespołem Szerokość kontra głębokość (stopień wgłębiania się w szczegóły; np.: czy projektujesz wszystkie ekrany ogólnie czy koncentrujesz się na pojedynczym ekranie) YP T O T O R P Z http://www.blender.pl/cpg/albums/userpics/10505/normal_carprototypeconcept1b.jpg Wireframe kontra projekt wizualny (dla kogo jest prototyp? Jeżeli prezentujesz ramach zespołu to projekt nie musi być piękny.) ROI: Return on Investment - Czyli czego oczekujemy od prototypu? (estetyczny, biznesowy, techniczny, funkcjonalny) Twórz elastyczne prototypy Gdzie powinien znajdować się pasek narzędzi? Ile elementów powinien zawierać statyczny pasek nawigacji? Prototyp nie jest wersją Beta produktu... 5

Rodzaje prototypów Dwie strategie wpływając na długość życia: Jeśli celem budowania prototypu jest dostarczenie użytkownikom działającego systemu wtedy mamy do czynienia z prototypowaniem ewolucyjnym. W przypadku gdy prototyp budowany jest po to by zatwierdzić lub dostarczyć wymagania dotyczące systemu korzysta się ze strategii prototypownia z porzuceniem. 6

Prototypowanie ewolucyjne IMPLEMENTACJA PROTOTYPU OCENA PROTOTYPU IMPLEMENTACJA PRZYROSTU 7

Prototypowanie z porzuceniem 8

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. (np. w technice Wizard of Oz) 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 na cele przygotowania specyfikacji funkcjonalnej, 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. 9

Prototypowanie jako proces Projekt Faza 1 - Planowanie Weryfikacja wymagań Przygotowanie diagramów zadań / przepływu ekranów Określenie zasięgu prototypu i jego szczegółowości (nie ma sensu budować prototypu całego systemu) Ewaluacja Implementacja Faza 2 Specyfikacja Charakterystyka prototypu (np.: cechy odbiorców, etap, szybkość, długość, szczegółowość, styl, oraz medium za pomocą którego chcemy prototypować) Wybór metody prototypowania Wybór narzędzia Faza 3 Projekt Określ założenia projektu (np. wytyczne projektowe interfejsu użytkownika) Wytworzenie prototypu Faza 4 Ewaluacja Skonsultuj prototyp z różnymi członkami zespołu Zweryfikuj prototyp (np.: testy użyteczności) Zrealizuj projekt, czyli zaimplementuj system... 10

Prosty scenariusz tworzenia prototypu Krok 1 wyodrębnij najistotniejsze ekrany pozwoli ci się to skoncentrować na najważniejszych aspektach, które później posłużą jako szablon dla pozostałych ekranów Krok 2 określ na ekranie najważniejsze obszary (schemat blokowy) za pomocą bloków wyodrębnij gdzie ma być np. menu nawigacyjne, informacje o statusie, treść dokumentu, formularza itp. Krok 3 naszkicuj układ najważniejszego ekranu mając schemat blokowy ekranu uzupełnij go o pozostałe szczegóły Krok 4 naszkicuj pozostałe ekrany wykorzystaj najważniejszy ekran jako szablon, w ten sposób zachowasz spójność w projekcie Krok 5 udokumentuj cel prototypu w ten sposób proces ewaluacji pozwoli określić, czy prototyp zakończył się sukcesem czy porażką (typowe cele: biznesowe, funkcjonalne, techniczne, związane z użytecznością) 11

Metody prototypowania Sortowanie kart (card sorting) grupowanie, kategoryzacja pojęć, określenie składu menu, nawigacji, poprawa nazewnictwa Tworzenie układów (wireframing) ukreślenie ogólnej struktury produktu, interfejsu Scenopisy zadaniem jest uzgodnienie wizji interfejsu między twórcami a klientami Prototypy papierowe Szkice interfejsu użytkownika, które mogą już pełnić rolę modelu interakcyjnego Prototypy cyfrowe realizowane za pomocą oprogramowania graficznego oraz specjalistycznego Wizard-of-Oz Interakcja systemu jest symulowana przez ukrytego operatora; osoba testująca system ma wrażenie, że współpracuje z systemem 12

Narzędzia do prototypowania 13

Narzędzia prototypowania - Wymagania Wymagania dotyczące narzędzi prototypowania skupiają się na minimalizacji czasu i kosztów i obejmują: Łatwość nauki końcowymi użytkownikami takich narzędzi są artyści, analitycy, programiści, projektanci interfejsu, graficy komputerowi itp. Ergonomia modyfikacji proces prototypowania charakteryzuje się częstym wprowadzaniem niewielkich poprawek, których wynik powinien natychmiast być widoczny dla projektanta. Elastyczność i kontrola nad szczegółami prototypu narzędzie powinno być elastyczne i powinno umożliwiać projektowanie różnych typów, wzorów graficznych interfejsów. Możliwość gromadzenia danych o projekcie narzędzie powinno umożliwiać gromadzenie notatek, adnotacji które dotyczą wszystkich faz projektowych (np. uwagi dla programistów, uwagi klienta, motywacja uwzględnienia danego elementu itp.) Generowanie interaktywnych prototypów automatyczne generowanie interaktywnych prototypów, na których można wykonać testy użyteczności. Wsparcie dla procesu wytwarzania narzędzie powinno pomagać we wszystkich fazach procesu prototypowania i śledzić rozwój projektu. Wsparcie dla pracy zespołowej Wsparcie dla systemów kontroli wersji 14

Prototypowanie Narzędzia i technologie Narzędzia ogólnego przeznaczenia: Papierowe szkice, programy do prezentacji (PowerPoint) programy do grafiki rastrowej i wektorowej (Visio) Wykorzystanie języków skryptowych html, Python, Ruby itp... Wykorzystanie narzędzi do budowania GUI środowiska zintegrowane. Qt Designer, Visual Basic (lub teraz MS Visual Studio), Netbeans, Delphi, PowerBuilder, Glade Wykorzystanie specjalistycznych narzędzi do prototypowania GUI (tworzenie fasad systemów): 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) Narzędzia CASE: Enterprise Architect 15

Szkice papierowe Problem odbioru wyglądu systemu a nie jego zachowania. Prototypy papierowe przedstawiają zazwyczaj rysunki stanu ekranu przed akcją i po akcji wraz z opisem jaka akcja została podjęta. Problem polega na tym, że w ten sposób odbieramy system statycznie koncentrując się na obrazkach, a nie interakcji. http://www.snyderconsulting.net/images/paperprototyping/fig_1.gif 16

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

Prototyp papierowy Aby zmniejszyć pracochłonność wprowadzania modyfikacji stosuje się wycinanki. http://www2.warwick.ac.uk/services/its/servicessupport/web/blogs/about/usability/paper/ 18

Microsoft Visio Wzorce interfejsu użytkownika w Microsoft Visio Typowe rozszerzenie narzędzia do rysowania. Warto stosować, gdy nie potrzebujemy interaktywnego prototypu. 19

Microsoft Visio 20

Porównanie narzędzi ogólnego przeznaczenia 21

Języki skryptowe 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. oraz możliwość szybkiego projektowania układów. 22

Wireframing Podstawowa idea stojąca za wireframingiem, layoutowaniem ( układowaniem ): Separacja treści od układu i prezentacji podczas projektowania układów koncentrujemy się logicznym podziale strony/widoku, a nie na szczegółach prezentacji poszczególnych elementów Projekt graficzny Wykorzystaj układ strony do sygnalizacji przebiegu interakcji niech układ strony w naturalny sposób podkreśla kolejność czynności. Tak Nie Zgrupuj ze sobą elementy związane tematycznie 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? 23

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

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

Wireframing - Szablon układu (Layout'u) 26

Typowy Układ Serwisu (Layout) 27

Dreamweaver Pionier wireframingu... 28

Dreamweaver - wireframing 29

Wireframing wynik w Firefoxie 30

Bankomat...? Dreamweaver Firefox 31

Znowu bankomat...? Dreamweaver Firefox 32

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

Zintegrowane środowiska programistyczne Bardzo wygodne tworzenie prototypów, które mogą być w dalszej fazie wykorzystane jako wstępne wersje implementacji systemu. Z natury prototypy takie są interaktywne, dzięki czemu otrzymujemy lepszej jakości rezultaty testów Użyteczności. Wymagane kwalifikacje Niestety do realizacji prototypu w zintegrowanym środowisku wymagana jest znajomość programowania. Zintegrowane środowiska programistyczne są skomplikowane do nauki obsługi. Automatyczne tworzenie dokumentacji Nie możemy automatycznie wygenerować dokumentacji, która może stać się częścią specyfikacji. Problematyczne stosowanie komentarzy i adnotacji do poszczególnych kontrolek i okien. Można robić notatki na wydrukowanych na papierze zrzutach ekranu. Bardzo duża pracochłonność Prototypy tworzone w zintegrowanych narzędziach programistycznych wymagają największych nakładów pracy. Problem przekształcenia procesu prototypowania w RAD. 34

MS Visual Studio 35

Qt Creator 36

NetBeans 37

Porównanie cech narzędzi do budowania GUI 38

Narzędzia specjalistyczne Nie wymagają od użytkownika znajomości HTML a, JavaScript u, czy CSS. Skupiają się nie tylko na samym zbudowaniu prototypu, ale na jego treści. Dbają bardziej kompleksowo o cały proces projektowania i prototypowania interfejsu użytkownika. Wspomagają zarządzanie projektem, zbieranie wymagań dotyczących systemu, zarówno funkcjonalnych jak i dotyczących implementacji. Dzięki możliwości wprowadzania scenariuszy ułatwiają przeprowadzanie testów użyteczności. Narzędzia te wpisują się w strategię prototypowania z porzuceniem. W przypadku narzędzi CASE w jednym projekcie posiadamy logikę funkcjonalną aplikacji w formie diagramów przypadków użycia, czynności, stanów oraz mamy zawartą logikę biznesową w formie diagramów klas, sekwencji oraz projekt interfejsu. 39

Narzędzia specjalistyczne - 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 Tworzenie scenariuszy przypadków użycia oraz łączenie czynności z scenopisami. Możliwość tworzenia gotowych prezentacji jako scenopisów do scenariuszy przypadków użycia 40

Mockup Screens Zrzuty ekranu 1 / 5 41

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/ Oparte na silniku Eclipse 46

Axure RP Zarządzanie stronami Definiowanie interakcji z widgetami. Oprócz standardowych widgetów można definiować przepływy. Widoki obiektów (widoki abstrakcyjne) Adnotacje do kontrolek, stron, lub widoków. (Możliwość definiowania własnych adnotacji) Uwagi, notatki do specyfikacji funkcjonalnej dotyczące danej strony. 47

Axure RP generowanie specyfikacji 48

Axure RP - Prototyp w HTML Oprócz udokumentowanej struktury projektu, możliwa jest interaktywna nawigacja między widokami i oknami. Dołączone są również adnotacje. 49

Enterprise Architect Rozszerzenie Enterprise Architecta umożliwia prototypowanie wizualne interfejsu. Główna zaleta integracja prototypu z pozostałymi artefaktami projektu. Problemy brak możliwości tworzenia interakcji; utrudnione tworzenie scenopisów; ograniczona liczba kontrolek Zbiór kontrolek: - pakiet - ekran - UI Control - Obiekt Ekran jest rysunkiem Obiekty na nim umiejscowione nie są przyporządkowane do niego. 50

Enterprise Architect Wybór kontrolki realizujemy poprzez określenie zdefiniowanego w Enterprise Architect stereotypu. 51

Demo w Enterprise Architect 52

Justinmind Prototyper Justinmind Prototyper jest obok Axure RP Pro drugim wiodącym na rynku narzędziem do prototypowania interfejsów użytkownika. Jego możliwości są bardzo zbliżone do Axure. 53

Porównanie narzędzi specjalistycznych 54

Nasze rozwiązania Praca dyplomowa Robert Duda GUI Designer 55

GUI Designer Nawigacje, eksport do HTML, widoki, własne atrybuty, specyfikacja 56

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 57