1

Projektowanie Graficznych Interfejsów Użytkownika

Robert Szmurło

2

PrototypowaniePrototypowanie

jako środek wytwarzania („implementacji”) jako środek wytwarzania („implementacji”) projektu wizualnegoprojektu wizualnego

ProjektWizualnyAnaliza Prototyp Zrealizowany

System

Z http://www.blender.pl/cpg/albums/userpics/10505/normal_CarPrototypeConcept1b.jpg

3

PrototypowanieDefinicja: środek do analizy, testowania pewnych koncepcji przed

zainwestowaniem w nie kapitału.

Cel:

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

Oszczędzić czas i pieniądze

4

Pytania w których ma pomóc PrototypDotyczą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?

5

Prototyp – CharakterystykaCo 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 projektujeszwszystkie ekrany ogólnie czy koncentrujesz się na pojedynczym ekranie)

– „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...

Z http://www.blender.pl/cpg/albums/userpics/10505/normal_CarPrototypeConcept1b.jpg

PROTOTYP

6

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

7

Prototypowanie ewolucyjne

IMPLEMENTACJAPROTOTYPU

IMPLEMENTACJAPRZYROSTU

OCENAPROTOTYPU

8

Prototypowanie z porzuceniem

9

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.

10

Prototypowanie – jako procesFaza 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)

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

Projekt

ImplementacjaEwaluacja

11

Prosty scenariusz tworzenia prototypuKrok 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ą)

12

Metody prototypowaniaSortowanie 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

13

Narzędzia do prototypowania

14

Narzędzia prototypowania - WymaganiaWymagania 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

15

Prototypowanie – Narzędzia i technologieNarzę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

16

Szkice papierowe

http://www.snyderconsulting.net/images/paperPrototyping/fig_1.gif

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.

17

Szkice papierowe

http://www.gdoss.com/images/lmf_paper_prototype.gif

18

Prototyp papierowy

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

Aby zmniejszyć pracochłonność wprowadzania modyfikacji stosuje się „wycinanki”.

19

Microsoft VisioWzorce interfejsu użytkownika w Microsoft Visio

– Typowe rozszerzenie narzędzia do rysowania. – Warto stosować, gdy nie potrzebujemy interaktywnego prototypu.

20

Microsoft Visio

21

Porównanie narzędzi ogólnego przeznaczenia

22

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.

Języki skryptowe

23

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

● 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?

Tak Nie

24

Wireframing – układ treści

Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/

25

Wireframing – układ treści

Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/

26

„Wireframing” - Szablon układu (Layout'u)

27

Typowy Układ Serwisu (Layout)

28

DreamweaverPionier „wireframingu”...

29

Dreamweaver - wireframing

30

Wireframing – wynik w Firefoxie

31

Bankomat...?

Dreamweaver Firefox

32

Znowu bankomat...?

Dreamweaver Firefox

33

Znowu bankomat...?

Dreamweaver Firefox

I tak dalej...

34

Zintegrowane środowiska programistyczneBardzo 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.

35

MS Visual Studio

36

Qt Creator

37

NetBeans

38

Porównanie cech narzędzi do budowania GUI

39

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.

40

Narzędzia specjalistyczne - Mockup ScreensNarzę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

41

Mockup Screens – Zrzuty ekranu 1 / 5

42

Mockup Screens – Zrzuty ekranu 2 / 5

43

Mockup Screens – Zrzuty ekranu 3 / 5

44

Mockup Screens – Zrzuty ekranu 4 / 5

45

Mockup Screens – Zrzuty ekranu 5 / 5

46

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

47

Axure RP

Zarządzanie stronami

Opróczstandardowychwidgetówmożna definiowaćprzepływy.

Widokiobiektów(widoki abstrakcyjne)

Uwagi, notatki do specyfikacji funkcjonalnejdotyczące danej strony.

Adnotacje dokontrolek, stron,lub widoków. (Możliwośćdefiniowania własnych adnotacji)

Definiowanieinterakcji zwidgetami.

48

Axure RP – generowanie specyfikacji

49

Axure RP - Prototyp w HTML

Oprócz udokumentowanejstruktury projektu,

możliwa jest interaktywnanawigacja międzywidokami i oknami.

Dołączonesą równieżadnotacje.

50

Enterprise ArchitectRozszerzenie 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 nimumiejscowione niesą przyporządkowanedo niego .

51

Enterprise ArchitectWybór kontrolki realizujemy poprzez określenie zdefiniowanego w

Enterprise Architect stereotypu.

52

Demo w Enterprise Architect

53

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.

54

Porównanie narzędzi specjalistycznych

55

„Nasze” rozwiązania● Praca dyplomowa Robert Duda – GUI Designer

56

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

57

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