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

– podniesienie jakości specyfikacji funkcjonalnych

Oszczędzić czas i pieniądze

4

Pytania w których pomaga PrototypDotyczące łatwości używania i nauki obsługi:

– 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:– 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:– Czy użytkownik produkt zwraca na siebie uwagę?– Czy prezentacja danych jest czytelna?– Czy użytkownicy z przyjemnością korzystają z produktu?

5

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.

6

Prototyp – CharakterystykaCo 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 -

Czyli czego oczekujemy od prototypu?

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

7

Prototypowanie – jako procesFaza 1 - Planowanie

– Weryfikacja wymagań

– Przygotowanie diagramów zadań / przepływu ekranów

– Określenie zasięgu zawartości 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 (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

Projekt

ImplementacjaEwaluacja

8

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

9

Narzędzia do prototypowania

10

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

11

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

Wykorzystanie narzędzi do budowania GUI – środowiska zintegrowane.– Qt Designer, Visual Basic (lub teraz MS.Visual Studio), Netbeans,

Delphi, PowerBuilder, Glade i wiele innych.

Narzędzia CASE:– Enterprise Architect

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

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.

14

Szkice papierowe

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

15

Prototyp papierowy

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

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

16

Narzędzia cyfrowe - 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

17

Mockup Screens – Zrzuty ekranu 1 / 5

18

Mockup Screens – Zrzuty ekranu 2 / 5

19

Mockup Screens – Zrzuty ekranu 3 / 5

20

Mockup Screens – Zrzuty ekranu 4 / 5

21

Mockup Screens – Zrzuty ekranu 5 / 5

22

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

23

Microsoft VisioWzorce interfejsu użytkownika w Microsoft Visio

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

24

Microsoft Visio

25

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.

26

Axure RP – generowanie specyfikacji

27

Axure RP - Prototyp w HTML

Oprócz udokumentowanejstruktury projektu,

możliwa jest interaktywnanawigacja międzywidokami i oknami.

Dołączonesą równieżadnotacje.

28

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 .

29

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

Enterprise Architect stereotypu.

30

Demo w Enterprise Architect

31

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.

32

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.

33

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

34

Wireframing – układ treści

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

35

Wireframing – układ treści

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

36

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

37

Typowy Układ Serwisu (Layout)

38

DreamweaverPionier „wireframingu”...

39

Dreamweaver - wireframing

40

Wireframing – wynik w Firefoxie

41

Bankomat...?

Dreamweaver Firefox

42

Znowu bankomat...?

Dreamweaver Firefox

43

Znowu bankomat...?

Dreamweaver Firefox

I tak dalej...

44

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