Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Charakterystyki uytkownikwNazwa uytkownikaCel korzystania z systemuKlasyfikacjaprzynaleno organizacyjnadowiadczenie i umiejtnociuprawnienia decyzyjneDodatkowe cechy wiekpoziom wyksztaceniazastrzeeniaKrytyczne czynniki powodzeniapotrzeby i moliwocipreferencje i uprzedzeniaScenariusze zada

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Podstawowe zasady projektowania interfejsu uytkownikaWygld interfejs powinien by podzielony na rne obszary przeznaczone do rnych celw.Uwiadamianie zawartoci interfejs powinien uwiadamia uytkownika, w ktrym miejscu si znajduje i co oznaczaj prezentowane informacje.Estetyka interfejs powinien zapewnia rwnowag pomidzy iloci prezentowanej informacji a jej atrakcyjnoci wizualn.Dowiadczenie uytkownika interfejs powinien uwzgldnia zarwno atwo nauki dla pocztkujcych jak i atwo uycia dla dowiadczonych uytkownikw.Spjno interfejs powinien by spjny dla uatwienia uytkownikowi przewidywania skutkw podejmowanych przez niego dziaa.Minimalizacja wysiku interfejs powinien uatwia dziaania uytkownika, tak by ilo krokw wiodcych do osignicia celu bya jak najmniejsza.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Podzia interfejsu na obszaryObszar nawigacjiprzegldarkiObszar nawigacjistronyObszar statusuprzegldarkiObszar nawigacjistronyObszar nawigacjistronyObszar informacyjny strony

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Zasady podziauKady obszar powinien mie jasno wytyczone granice.Kady obszar powinien mie jasno okrelone przeznaczenie.Kady obszar powinien zawiera tylko te informacje, ktre s potrzebne do realizacji okrelonego przeznaczenia.Obszary informacyjne powinny by uszeregowane w kolejnoci przetwarzania tej informacji przez uytkownika (z gry w d, od lewej do prawej).

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Zasady uwiadamiania zawartoci (1)Wszystkie okna i raporty musz mie tytuy jednoznacznie identyfikujce ich zawarto.Menu musi pokazywa, w ktrym miejscu jest uytkownik (i jak si tu dosta).Przyciski powinny mie napisy identyfikujce ich funkcje. Jeli napisy te nie s pokazywane cay czas na ekranie, to powinny by pokazywane przy najechaniu na przycisk wskanikem myszy.Przyciski odpowiedzi na oknach komunikatw powinny by atwo interpretowane w kontekcie treci komunikatu.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Zasady uwiadamiania zawartoci (2)Forma informacji na ssiadujcych obszarach powinna by rna (np. tekst-grafika, rne czcionki). Rozrnianie kolorem nie jest wystarczajce.Jeli informacje na ssiadujcych obszarach s podobne w formie, to musz by oddzielone dodatkowym elementem (np. lini).Kade pole edycji musi mie etykiet jednoznacznie identyfikujc zawarto pola.Pola edycji, ktrych format wewntrzny nie jest oczywisty (np. pola z dat), musz mie dodatkowe oznaczenie formatu wprowadzanych danych.Raporty powinny mie dat sporzdzenia.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Zasady estetyki (1)Interfejs uytkownika powinien by zarwno funkcjonalny jak i przyjemny dla oka.Ilo wolnego miejsca pomidzy elementami interfejsu powinna by dostosowana do wymaga uytkownika (50% dla pocztkujcych, 10% dla zaawansowanych).Naley unika tworzenia formularzy lub raportw duych, zawierajcych ponad 50 pl danych. Formularz lub raport powinien zawiera tylko informacje, ktre mog by jednorazowo przetworzone przez czowieka.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Zasady estetyki (2)Tekst gwny powinien by prezentowany czcionk 8-10 punktow. Na formularzach powinna by uywana czcionka bezszeryfowa, na raportach czcionka szeryfowa. Naley unika stosowania wicej ni dwch rnych czcionek. Stanowczo trzeba unika czcionek ozdobnych, lecz trudnych do czytania.Stosowane kolory powinny by stonowane (kontrastowe zwracaj uwag, lecz s mczce dla oka).Kolor nie moe by jedynym wyrnikiem informacji. Interfejs uytkownika nie moe ukrywa informacji przed osobami cierpicymi na daltonizm.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Dowiadczenie uytkownika (1)Interfejs uytkownika powinien by atwy do nauczenia si posugiwania si nim przez pocztkujcych uytkownikw.Interfejs uytkownika powinien uatwia i przyspiesza wykonywanie dziaa przez zaawansowanych uytkownikw.Menu powinno skada si nie wicej ni z trzech poziomw w przypadku menu gwnego i nie wicej ni z dwch poziomw w przypadku menu kontekstowych. Menu powinno prezentowa wszystkie dostpne funkcje aplikacji, tzn. nie powinno by takiej funkcji, do ktrej nie mona by si byo dosta z menu.Menu na kadym poziomie powinno zawiera nie wicej ni kilka pozycji. W przypadku bardziej rozbudowanego menu wskazane jest, by pozycje menu byy logicznie pogrupowane oraz by czciej uywane funkcje byy w pewien sposb wyrnione.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Dowiadczenie uytkownika (2)Czciej wykorzystywane funkcje powinny by dostpne bezporednio poprzez przyciski narzdziowe.Przyciski narzdziowe powinny mie obrazek kojarzcy si z wykonywan funkcj oraz nazw funkcji. Jeli nazwy funkcji na przyciskach nie mog by pokazane, to powinny by pokazywane przy najechaniu mysz na przycisk.Przyciski powinny by logicznie pogrupowane na paskach narzdziowych.W przypadku aplikacji realizujcej liczne funkcje wskazane jest, aby umoliwiaa ona konfiguracj paskw narzdziowych, w tym umieszczanie na paskach przyciskw wiodcych do wszystkich funkcji aplikacji, rwnie tych rzadziej wykorzystywanych.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Dowiadczenie uytkownika (3)Wskazane jest, aby bardziej zoona aplikacja prezentowaa swoje moliwoci za pomoc podpowiedzi. Jeli podpowiedzi te zajmuj istotnie duo miejsca na ekranie, to aplikacja powinna umoliwi wyczenie podpowiedzi i wczenie ich ponownie na danie.Aplikacja powinna umoliwia szybki dostp do funkcji za pomoc skrtw klawiszowych. W przypadku bardziej zoonej aplikacji wskazane jest zapewnienie moliwoci definiowania wasnych skrtw klawiszowych.Aplikacja powinna mie system pomocy ekranowej wyjaniajcej podstawowe mechanizmy zastosowane w aplikacji i wyjaniajcej sposb wykorzystania tych mechanizmw.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)SpjnoInterfejs uytkownika powinien by spjny dla zapewnienia przewidywalnoci podejmowanych dziaa przez uytkownika.Wszystkie formularze i raporty w aplikacji powinny by zaprojektowane w jednolity sposb, tzn. z uyciem jednolitego aparatu pojciowego (terminologii) i z zastosowaniem jednolitej formy (takiego samego ukadu, czcionek i kolorw) oraz sposobu nawigacji.Interfejs uytkownika aplikacji powinien by spjny z innymi aplikacjami z tej samej dziedziny zastosowania wykorzystywanymi w okrelonym systemie operacyjnym.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Minimalizacja wysikuInterfejs uytkownika powinien uatwia uytkownikowi wykorzystanie funkcji aplikacji tak, aby wysiek uytkownika bya jak najmniejszy.Zaleca si, aby ilo klikni mysz wiodcych poprzez menu lub przyciski narzdziowe do kadej funkcji nie przekraczaa trzech.W przypadku funkcji wielokrotnie wykorzystywanych zaleca si zastosowanie mechanizmu powtarzania funkcji lub grupowania przedmiotw dziaania funkcji.W przypadku bardziej zoonych aplikacji zaleca si zastosowanie mechanizmu umoliwiajcego czenie wielu rnych funkcji w jedn.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Proces projektowania interfejsu uytkownikaOpracowanie scenariuszy uyciaProjektowaniestrukturyinterfejsuProjektowaniestandardwinterfejsuPrototypowanieprojektuinterfejsuOcenainterfejsu

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Scenariusz uyciaScenariusz uycia jest opisem podstawowych krokw, ktre musi przej uytkownik dla osignicia okrelonego celu.Podstawa do opracowania: model przypadkw uycia, diagramy sekwencji (interakcji).Nie rozpatruje si wszystkich moliwych scenariuszy uycia, lecz dwa lub trzy najczciej realizowane.Sposb prezentacji: opis tekstowy

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Scenariusz uycia 1.Klient przegldajcy ofertKlient przeglda ofert szukajc interesujcych go towarw w okrelonej kategoriiKlient przeglda podstawowe informacje dla kilku towarw. Porwnuje informacje midzy sob cznie z ofert cenow.Klient umieszcza wybrany towar (towary) w koszyku i dalej przeglda ofert.Przed zoeniem zamwienia klient przeglda koszyk dla zorientowania si, czy czna kwota do zapaty jest do zaakceptowania. Ewentualnie klient usuwa pewne towary z koszyka.Klient skada zamwienie wybierajc form patnoci.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Scenariusz uycia2. Klient szukajcy okrelonego towaruKlient szuka okrelonego towaru po nazwie lub typie.Klient oczekuje podania ceny i terminu dostawy.W przypadku niezadowolenia klient oczekuje innej oferty w tym samym typie.Klient skada zamwienie lub przechodzi do innej witryny.

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Struktura interfejsuStruktura interfejsu okrela podstawowe komponenty interfejsu i sposb ich wspdziaania dla dostarczenia okrelonej funkcjonalnoci dla uytkownikw.Sposb prezentacji: Window Navigation Diagram (WND)

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Window Navigation Diagram (WND) windowMain Menu windowMenu A windowMenu B formForm A formForm B formForm C reportReport A

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Standardy interfejsu (1)Standardy interfejsu s do podstawowe elementy projektowe, ktre s wsplne dla wielu ekranw, formularzy i raportw w systemie. Tworzy si repozytorium elementw, ktre bd wykorzystywane przy prototypowaniu i projektowaniu interfejsuUstala si nazwy elementw, ich znaczenie i form (nazw prezentowan dla uytkownika, ikon)

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Standardy interfejsu (2)Metafory interfejsu (np. koszyk na zakupy)Obiekty interfejsowe - klasy gwnych komponentw interfejsu (np. Formularz zamwienia)Akcje interfejsowe - dziaania wiodce uytkownika przez interfejs (np. Zamwienie-nowe, Zamwienie-zmiana, Zamwienie-anuluj)Ikony interfejsowe (zgodno ze standardami, czytelno, zrozumiao)Szablony interfejsowe - wygld gwnych okien, formularzy, raportw

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Prototypowanie interfejsuStoryboardPrototypowanie HTMLPrototypowanie w jzyku docelowym

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)StoryboardDodajKlientaZnajdKlientaKlientZnalezionyPoprawDaneKlientaListaKlientwPodajDaneKlientaListaKlientwListaKlientwZnajdKlientaZnajdKlientaDodajKlienta

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Prototypowanie wHTMLinteraktywneszybkie w wykonaniunie odpowiada obrazowi docelowemujzyku docelowyminteraktywnewolniejszeodpowiada obrazowi docelowemu

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)Ocena interfejsuocena heurystycznaocena zgodnoci z zasadamimin. 3 ekspertwprzegld interfejsu z uytkownikiemocena interaktywna u uytkownikaformalne testowanie uytecznoci

Projektowanie interfejsu uytkownika (1)

Dokumentacja i Jako Oprogramowania*/27Projektowanie interfejsu uytkownika (1)LiteraturaDennis A., Wixom B.H., Tegarden D., Systems Analysis & Design. An Object-Oriented Approach with UML, John Wiley and Sons, USA, 2002Rolf Hennicker, Nora Koch: Modeling the User Interface of Web Applications with UML, http:// www.pst.informatik.uni-muenchen.de /personen/kochn/pUML2001-Hen-Koch.pdfCoad P., Yourdon E.: Projektowanie obiektowe, Oficyna wydawnicza Read Me, Warszawa 1994

Projektowanie interfejsu uytkownika (1)