[WikiDyd] [TitleIndex] [WordIndex

Laboratorium projektowania i wytwarzania systemów informatycznych opartych na graficznym interfejsie użytkownika


Materiały zostały opracowane w ramach realizacji Programu Rozwojowego Politechniki Warszawskiej.

http://prpw.iem.pw.edu.pl/images/KAPITAL_LUDZKI.gifhttp://prpw.iem.pw.edu.pl/images/EU+EFS_P-kolor.gif

http://www.pr.pw.edu.pl/ jest projektem współfinansowanym przez Unię Europejską w ramach Europejskiego Funduszu społecznego (działanie 4.1.1 Programu Operacyjnego Kapitał Ludzki) i ma na celu poprawę jakości kształcenia oraz dostosowanie oferty dydaktycznej Politechniki Warszawskiej do potrzeb rynku pracy. Będzie on realizowany przez Uczelnię w latach 2008-2015.

Ćwiczenie Nr 5

Realizacja wizualnych prototypów wskazanych przez prowadzącego widoków i okien abstrakcyjnych

Autor: dr inż. Robert Szmurło

1. Cel ćwiczenia

W ramach ćwiczenia student zapoznaje się z profesjonalnym narzędziem do tworzenia szkieletów/prototypów interfejsu użytkownika Axure RP. Student zdobywa doświadczenie związane z przygotowywaniem prototypów, które mogą być wykorzystane jako narzędzie do uszczegółowienia wymagań zamawiającego system, przekazania projektu dokładnej interakcji użytkownika z system dla zespołu programistów lub do przeprowadzenia ewaluacji interfejsu użytkownika przez ekspertów interakcji. W ramach ćwiczenia student wytwarza interaktywny prototyp zgodnie z metodyka prototypowania z porzuceniem.

2. Zakres badań

W ramach ćwiczenia student ma za zadanie wykonać prototyp interfejsu aplikacji zainstalowanej na kasie w supermarkecie. Prototyp aplikacji ma zostać wykonany na podstawie udostępnionego przez prowadzącego projektu w UML. W pierwszej części ćwiczenia student ma za zadanie zapoznać się z możliwościami profesjonalnego narzędzia do prototypowania jakim jest Axure RP. Następnie powienien poprawnie zinterpretować projekt udostępniony przez prowadzącego w UML i na jego podstawie powinien wykonać interaktywny prototyp. Zadaniem studenta jest przygotowanie projektów wizualnych i interakcji pomiędzy nimi dla dostarczonego przez prowadzącego gotowego projektu.

Prototyp interfejsu graficznego systemu informatycznego to środek do analizy, testowania pewnych koncepcji przed zainwestowaniem w nie kapitału. Prototyp stanowi tylko fasadę rzeczywistego systemu, która modeluje w sposób wizualny interakcję użytkownika z systemem. W przypadku rozbudowanych prototypów można na nich wykonać właściwe testy użyteczności. Główne motywy tworzenia prototypu GUI:

Prototypy musimy tworzyć w określonym celu. Przed przystąpieniem do pracy musimy zaplanować na jakie pytania powinien prototyp pomóc nam odpowiedzieć. Pierwszą grupą pytań są pytania dotyczące łatwości używania i nauki obsługi systemu:

Druga grupą są pytania pomagające określić wartość produktu przez klienta:

Trzecią grupą, są pytania dotyczące wyglądu i odbioru systemu przez przyszłych użytkowników:

W praktyce stosuje się dwie strategie wpływając na długość życia prototypu:

prototyp_ewol_porz1.png

Strategie tworzenia prototypów

W ramach niniejszego ćwiczenia studenci przygotowują prototypy z porzuceniem.

3. Program badań

Uwaga! W ćwiczeniu wykorzystujemy projekty abstrakcyjne wykonane w ćwiczeniu czwartym.

axure_opis.png

Widok podstawowych funkcji programu Axure RP

  1. Zapoznać się z interfejsem aplikacji Axure RP.
  2. Zaprojektować wszystkie widoki abstrakcyjne interfejsu Kasjerki
  3. Zaprojektować wszystkie okna abstrakcyjne
  4. Uzupełnić wszystkie okna i widoki o interakcję związaną z przełączaniem widoków i stron.
  5. Utworzyć 2 dodatkowe prototypy stron w różnych stanach (np. tylko do odczytu, do modyfikacji, komunikat o błędzie walidacji itp.)

4. Programy użyte w badaniach

  1. Axure RP.
  2. Enterprise Architect

5. Model funkcjonalny interfejsu Kasjerki w UML

  1. Diagram przypadków użycia
    • przypadki_uzycia.png

  2. Scenariusz czynności wykonywanych przez Kasjerkę
    • czynnosci.png

  3. Diagram podziału zadań - scenariusz funkcjonalny interfejsu
    • podzial_zadan.png

  4. Diagram okien abstrakcyjnych - Model statyczny interfejsu zawierający zbiór wszystkich okien występujących w procesie interakcji Kasjerki z systemem
    • okna.png

  5. Diagram widoków abstrakcyjnych - Model statyczny interfejsu zawierający zbiór wszystkich widoków, paneli, komponentów z których złożone są poszczególne okna
    • widoki.png

  6. Diagram nawigacji
    • nawigacja.png

  7. Diagram sekwencji - szczegółowy model interakcji Kasjerki z poszczególnymi oknami i widokami
    • sekwencja.png

6. Sprawozdanie

Sprawozdanie powinno składać się z:

  1. Automatycznie wygenerowane raportu z narzędzia Axure RP.
  2. Skompresowanego w jedno archiwum interaktywnego prototypu w HTML.

Szablon sprawozdania (raportu):

7. Pliki do pobrania

  1. Plik Enteprise Architect z modelem funckjonalnym i widokami abstracyjnymi interfejsu Kasjerki

8. Literatura

  1. Notatki do wykładu
  2. Jonathan Arnowitz, "Effective Prototyping for Software Makers (Interactive Technologies)"

2015-09-23 06:44