Projektowanie Graficznych Interfejsów Użytkownika
Robert Szmurło
1 PrototypowaniePrototypowanie jakojako środekśrodek wytwarzaniawytwarzania („implementacji”)(„implementacji”) projektuprojektu wizualnegowizualnego
Projekt Zrealizowany Analiza Prototyp Wizualny 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...) YP – Konsultacje z własnym zespołem OT OT – Szerokość kontra głębokość (stopień PR wgłębiania się w szczegóły; np.: czy projektujesz wszystkie ekrany ogólnie czy koncentrujesz się Z http://www.blender.pl/cpg/albums/userpics/10505/normal_CarPrototypeConcept1b.jpg 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...
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 OCENA PROTOTYPU 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 Ewaluacja Implementacja – 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... 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 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.
21 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?
22 Wireframing – układ treści
Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/
23 Wireframing – układ treści
Żródło: http://www.gotomedia.com/macromedia/monterey/architecture/
24 „Wireframing” - Szablon układu (Layout'u)
25 Typowy Układ Serwisu (Layout)
26 Dreamweaver
Pionier „wireframingu”...
27 Dreamweaver - wireframing
28 Wireframing – wynik w Firefoxie
29 Bankomat...?
Dreamweaver Firefox
30 Znowu bankomat...?
Dreamweaver Firefox
31 Znowu bankomat...?
Dreamweaver Firefox
I tak dalej...
32 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 uwagi z ewaluacji prototypu (zarówno wewnętrznej jak i zewnętrznej od zamawiającego system, lub z 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 i są efektywne wyłącznie jeżeli tworzymy prototypy ewolucyjne. Problem przekształcenia procesu prototypowania w RAD.
33 MS Visual Studio
34 Qt Creator
35 NetBeans
36 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.
37 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
38 Mockup Screens – Zrzuty ekranu 1 / 5
39 Mockup Screens – Zrzuty ekranu 2 / 5
40 Mockup Screens – Zrzuty ekranu 3 / 5
41 Mockup Screens – Zrzuty ekranu 4 / 5
42 Mockup Screens – Zrzuty ekranu 5 / 5
43 Axure RP
Zarządzanie stronami
Definiowanie interakcji z widgetami.
Oprócz Adnotacje do standardowych kontrolek, stron, widgetów lub widoków. można (Możliwość definiować definiowania przepływy. własnych adnotacji) Widoki obiektów (widoki abstrakcyjne) Uwagi, notatki do specyfikacji funkcjonalnej dotyczące danej strony.
44 Axure RP – generowanie specyfikacji
45 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. 46 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
Ekran jest Zbiór kontrolek: „rysunkiem” - pakiet - ekran Obiekty na nim - UI Control umiejscowione nie - Obiekt są przyporządkowane do niego .
47 Enterprise Architect
Wybór kontrolki realizujemy poprzez określenie zdefiniowanego w Enterprise Architect stereotypu.
48 Demo w Enterprise Architect
49 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.
50 Balsamiq
● Wygodne narzędzie do szybkiego prototypowania dostępne w wersji stacjonarnej i internetowej
● Wygodna współpraca zespołowa (wersja internetowa)
● Wygodne publikowanie prototypów dla klienta (gotowy hosting w serwisie mybalsamiq)
51 Podsumowanie narzędzi specjalistycznych
● Mockup Screens - http://www.mockupscreens.com/
● Axure RP - http://www.axure.com/
● Enterprise Architect - http://www.sparxsystems.com/products/ea/index.html
● Just in Mind Prototyper - http://www.justinmind.com/
● Balsamiq - http://www.balsamiq.com
52 Interakcja
Dziękuję za uwagę.
Chcemy być coraz lepsi! Jeżeli coś cię zainteresowało napisz e-maila:
– [email protected] Jeżeli coś cię bardzo znudziło napisz e-maila:
– [email protected] Jeżeli zauważyłeś błąd napisz e-maila:
53