Inżynieria oprogramowania: pośrednictwo graficzne

Transkrypt

1 Inżynieria oprogramowania: projektowanie pośrednictwa graficznego Politechnika Śląska Instytut Matematyki Wydział Matematyki Stosowanej

2 Pośrednictwo graficzne aplikacji:

3 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika

4 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI

5 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości

6 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura

7 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura ˆ aparat fotograficzny, kamera wideo

8 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura ˆ aparat fotograficzny, kamera wideo ˆ sterowanie dotykiem

9 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura ˆ aparat fotograficzny, kamera wideo ˆ sterowanie dotykiem ˆ akcelerometr, żyroskop, magnetometr

10 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura ˆ aparat fotograficzny, kamera wideo ˆ sterowanie dotykiem ˆ akcelerometr, żyroskop, magnetometr ˆ lokalizacja (GPS, Glonass)

11 Pośrednictwo graficzne aplikacji: ˆ (graficzny) interfejs użytkownika ˆ (graphical) user interface - GUI wykorzystanie sprzętu: ˆ monitor (kolorowy) wysokiej rozdzielczości ˆ mysz, tablet, klawiatura ˆ aparat fotograficzny, kamera wideo ˆ sterowanie dotykiem ˆ akcelerometr, żyroskop, magnetometr ˆ lokalizacja (GPS, Glonass)

12 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji:

13 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie

14 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie ˆ Ikony: Ikony reprezentują różne rodzaje informacji, np. pliki, procesy, akcje

15 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie ˆ Ikony: Ikony reprezentują różne rodzaje informacji, np. pliki, procesy, akcje ˆ Menu: Polecenie wybiera się z menu, a nie wpisuje w postaci intrukcji języka poleceń

16 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie ˆ Ikony: Ikony reprezentują różne rodzaje informacji, np. pliki, procesy, akcje ˆ Menu: Polecenie wybiera się z menu, a nie wpisuje w postaci intrukcji języka poleceń ˆ Wskazywanie: Urządzenia do wskazywania, takie jak mysz lub ekran dotykowy, służą do wyboru z menu i wskazywania wybranych elementów w oknie

17 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie ˆ Ikony: Ikony reprezentują różne rodzaje informacji, np. pliki, procesy, akcje ˆ Menu: Polecenie wybiera się z menu, a nie wpisuje w postaci intrukcji języka poleceń ˆ Wskazywanie: Urządzenia do wskazywania, takie jak mysz lub ekran dotykowy, służą do wyboru z menu i wskazywania wybranych elementów w oknie ˆ Grafika: Elementy graficzne można połączyć z tekstowymi na tym samym ekranie

18 Cechy GUI Zalety GUI Projektowanie GUI cechy pośrednictwa graficznego aplikacji: ˆ Okna: wiele okien umożliwia jednoczesne wyświetlanie różnych informacji na ekranie ˆ Ikony: Ikony reprezentują różne rodzaje informacji, np. pliki, procesy, akcje ˆ Menu: Polecenie wybiera się z menu, a nie wpisuje w postaci intrukcji języka poleceń ˆ Wskazywanie: Urządzenia do wskazywania, takie jak mysz lub ekran dotykowy, służą do wyboru z menu i wskazywania wybranych elementów w oknie ˆ Grafika: Elementy graficzne można połączyć z tekstowymi na tym samym ekranie

19 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego:

20 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki

21 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości

22 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu

23 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu ˆ prezentacja analogiczna jak w rzeczywistości (np. galeria obrazów)

24 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu ˆ prezentacja analogiczna jak w rzeczywistości (np. galeria obrazów) pewne cechy kojarzone z GUI, ale nie wynikające wprost z graficznego przedstawiania informacji: ˆ dostępność systemu pomocy

25 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu ˆ prezentacja analogiczna jak w rzeczywistości (np. galeria obrazów) pewne cechy kojarzone z GUI, ale nie wynikające wprost z graficznego przedstawiania informacji: ˆ dostępność systemu pomocy ˆ operacje cofnij/ponów

26 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu ˆ prezentacja analogiczna jak w rzeczywistości (np. galeria obrazów) pewne cechy kojarzone z GUI, ale nie wynikające wprost z graficznego przedstawiania informacji: ˆ dostępność systemu pomocy ˆ operacje cofnij/ponów ˆ unifikacja sterowników (cecha systemu operacyjnego!)

27 Cechy GUI Zalety GUI Projektowanie GUI zalety pośrednictwa graficznego: ˆ łatwość przyswajania/nauki ˆ wykorzystanie/ilustracja wielozadaniowości ˆ wydajność interakcji/dostęp do całego dokumentu lub dużego fragmentu ˆ prezentacja analogiczna jak w rzeczywistości (np. galeria obrazów) pewne cechy kojarzone z GUI, ale nie wynikające wprost z graficznego przedstawiania informacji: ˆ dostępność systemu pomocy ˆ operacje cofnij/ponów ˆ unifikacja sterowników (cecha systemu operacyjnego!)

28 Cechy GUI Zalety GUI Projektowanie GUI Proces projektowania graficznego interfejsu użytkownika:

29 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego:

30 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać

31 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób

32 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób ˆ Stabilność: bez niespodzianek/zaskoczeń

33 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób ˆ Stabilność: bez niespodzianek/zaskoczeń ˆ Cofanie: interfejs powinien obejmować mechanizmy, które umożliwiają użytkownikom wycofanie się z błędów

34 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób ˆ Stabilność: bez niespodzianek/zaskoczeń ˆ Cofanie: interfejs powinien obejmować mechanizmy, które umożliwiają użytkownikom wycofanie się z błędów ˆ Porady/pomoc: interfejs powinien przekazywać znaczące informacje zwrotne oraz pomoc kontekstową

35 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób ˆ Stabilność: bez niespodzianek/zaskoczeń ˆ Cofanie: interfejs powinien obejmować mechanizmy, które umożliwiają użytkownikom wycofanie się z błędów ˆ Porady/pomoc: interfejs powinien przekazywać znaczące informacje zwrotne oraz pomoc kontekstową ˆ Rozróżnianie użytkowników/modelu użytkownika: interfejs powinien oferować udogodnienia dostosowane do różnych rodzajów użytkowników systemu

36 Cechy GUI Zalety GUI Projektowanie GUI zasady projektowania pośrednictwa graficznego: ˆ Oparcie na doświadczeniach użytkownika: Interfejs powinien posługiwać się pojęciami i kategoriami zbliżonymi do doświadczeń osób, które najczęściej będą z niego korzystać ˆ Spójność: podobne operacje powinny być wykonywane w ten sam sposób ˆ Stabilność: bez niespodzianek/zaskoczeń ˆ Cofanie: interfejs powinien obejmować mechanizmy, które umożliwiają użytkownikom wycofanie się z błędów ˆ Porady/pomoc: interfejs powinien przekazywać znaczące informacje zwrotne oraz pomoc kontekstową ˆ Rozróżnianie użytkowników/modelu użytkownika: interfejs powinien oferować udogodnienia dostosowane do różnych rodzajów użytkowników systemu

37 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen):

38 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu

39 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu satysfakcja (satisfaction) brak dyskomfortu, pozytywne nastawienie do produktu

40 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu satysfakcja (satisfaction) brak dyskomfortu, pozytywne nastawienie do produktu przyswajalność (learnability) łatwość nauczenia się zasad działania w celu szybkiego rozpoczęcia pracy

41 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu satysfakcja (satisfaction) brak dyskomfortu, pozytywne nastawienie do produktu przyswajalność (learnability) łatwość nauczenia się zasad działania w celu szybkiego rozpoczęcia pracy zapamiętywalność (memorability) łatwość powrotu do pracy z systemem po przerwie (użycie schematów, wzorców)

42 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu satysfakcja (satisfaction) brak dyskomfortu, pozytywne nastawienie do produktu przyswajalność (learnability) łatwość nauczenia się zasad działania w celu szybkiego rozpoczęcia pracy zapamiętywalność (memorability) łatwość powrotu do pracy z systemem po przerwie (użycie schematów, wzorców) bezbłędność/błędy (faultlessness/errors) liczba (popełnianych) błędów oraz zdolność do wznowienia działania po awarii (wydobycia się z błędu)

43 Cechy GUI Zalety GUI Projektowanie GUI Wskaźniki opisujące użyteczność (usability) (Nielsen): efektywność (efficiency) łatwość uzyskania celu satysfakcja (satisfaction) brak dyskomfortu, pozytywne nastawienie do produktu przyswajalność (learnability) łatwość nauczenia się zasad działania w celu szybkiego rozpoczęcia pracy zapamiętywalność (memorability) łatwość powrotu do pracy z systemem po przerwie (użycie schematów, wzorców) bezbłędność/błędy (faultlessness/errors) liczba (popełnianych) błędów oraz zdolność do wznowienia działania po awarii (wydobycia się z błędu)

44 Miary użyteczności (ilościowe / jakościowe) Cechy GUI Zalety GUI Projektowanie GUI miary wydajności (ang. performance metrics)

45 Miary użyteczności (ilościowe / jakościowe) Cechy GUI Zalety GUI Projektowanie GUI miary wydajności (ang. performance metrics) miary problemów (ang. issue-based metrics)

46 Miary użyteczności (ilościowe / jakościowe) Cechy GUI Zalety GUI Projektowanie GUI miary wydajności (ang. performance metrics) miary problemów (ang. issue-based metrics) miary fizjologiczne i behawioralne (ang. behavioral and physiological metrics)

47 Miary użyteczności (ilościowe / jakościowe) Cechy GUI Zalety GUI Projektowanie GUI miary wydajności (ang. performance metrics) miary problemów (ang. issue-based metrics) miary fizjologiczne i behawioralne (ang. behavioral and physiological metrics) miary łączone i porównawcze (ang. combined and comparative metrics)

48 Miary użyteczności (ilościowe / jakościowe) Cechy GUI Zalety GUI Projektowanie GUI miary wydajności (ang. performance metrics) miary problemów (ang. issue-based metrics) miary fizjologiczne i behawioralne (ang. behavioral and physiological metrics) miary łączone i porównawcze (ang. combined and comparative metrics)

49 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success)

50 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz

51 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz ˆ poziom wykonania zadania (ang. levels of sucess)

52 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz ˆ poziom wykonania zadania (ang. levels of sucess) czas wykonania zadania (ang. time-on-task) ważne: odpowiednie sformułowanie zadania

53 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz ˆ poziom wykonania zadania (ang. levels of sucess) czas wykonania zadania (ang. time-on-task) ważne: odpowiednie sformułowanie zadania błędy (and. errors) pomiar liczby błędów popełnionych podczas wykonywania zadania (udział moderatora)

54 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz ˆ poziom wykonania zadania (ang. levels of sucess) czas wykonania zadania (ang. time-on-task) ważne: odpowiednie sformułowanie zadania błędy (and. errors) pomiar liczby błędów popełnionych podczas wykonywania zadania (udział moderatora) efektywność (ang. efficiency) wysiłek użytkownika, np. liczba wymaganych akcji

55 Cechy GUI Zalety GUI Projektowanie GUI Miary wydajności (ilościowe) wykonanie (ukończenie) zadania (ang. task success) ˆ sukces binarny (ang. binary success) oraz ˆ poziom wykonania zadania (ang. levels of sucess) czas wykonania zadania (ang. time-on-task) ważne: odpowiednie sformułowanie zadania błędy (and. errors) pomiar liczby błędów popełnionych podczas wykonywania zadania (udział moderatora) efektywność (ang. efficiency) wysiłek użytkownika, np. liczba wymaganych akcji

56 Cechy GUI Zalety GUI Projektowanie GUI Komunikatywność:

57 Cechy GUI Zalety GUI Projektowanie GUI Rozróżnianie modelu użytkownika (Firefox):

58 Cechy GUI Zalety GUI Projektowanie GUI Rozróżnianie modelu użytkownika (Firefox):

59 Cechy GUI Zalety GUI Projektowanie GUI Rozróżnianie modelu użytkownika (VLC):

60 Cechy GUI Zalety GUI Projektowanie GUI Rozróżnianie modelu użytkownika (VLC):

61 Model View Controller (MVC): Model Widok Koordynator: Cechy GUI Zalety GUI Projektowanie GUI

62 Zanim pojawił się interface graficzny:

63 Douglas Engelbart SRI myszka: http: //sloan.stanford.edu/mousesite/1968demo.html

64 Douglas Engelbart SRI GUI:

65 Douglas Engelbart SRI Workstation:

66 Xerox Alto/Star (1981):

67 Apple Lisa ( ):

68 DEC GEM (1984):

69 Windows 1 (1984):

70 Berkeley Softworks GEOS (C=64, 64kB RAM) (1985):

71 AmigaOS (1985):

72 MacOS X:

73 Linux (Ubuntu+GNOME):

74 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Elementy nowoczesnego pośrednictwa graficznego: wstążka (ribbon)

75 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Elementy nowoczesnego pośrednictwa graficznego: wstążka z Office 2010

76 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D przed wstążką (zakładki w menu Delphi 7)

77 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D przed wstążką (Lotus esuite, źródło: Wikipedia)

78 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach:

79 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch)

80 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np.

81 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np. ˆ bezpłatna biblioteka dla C# ( korzysta z Windows 7 Ribbon control

82 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np. ˆ bezpłatna biblioteka dla C# ( korzysta z Windows 7 Ribbon control ˆ Microsoft Ribbon for WPF (działa z XP i.net Framework 3.5SP1)

83 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np. ˆ bezpłatna biblioteka dla C# ( korzysta z Windows 7 Ribbon control ˆ Microsoft Ribbon for WPF (działa z XP i.net Framework 3.5SP1) ˆ Ribbon35 ( bezpłatny komponent dla.net

84 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np. ˆ bezpłatna biblioteka dla C# ( korzysta z Windows 7 Ribbon control ˆ Microsoft Ribbon for WPF (działa z XP i.net Framework 3.5SP1) ˆ Ribbon35 ( bezpłatny komponent dla.net ˆ Ciekawostka: w Delphi od wersji 2009 komponent Ribbon jest wbudowany

85 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejs Ribbon we własnych aplikacjach: ˆ Windows 7 Ribbon Control element interfejsu Windows 7, może ew. działać z Vista (patch) ˆ niezależne biblioteki (najczęściej płatne), np. ˆ bezpłatna biblioteka dla C# ( korzysta z Windows 7 Ribbon control ˆ Microsoft Ribbon for WPF (działa z XP i.net Framework 3.5SP1) ˆ Ribbon35 ( bezpłatny komponent dla.net ˆ Ciekawostka: w Delphi od wersji 2009 komponent Ribbon jest wbudowany

86 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Elementy nowoczesnego pośrednictwa graficznego: wstążka (wersja web - demo)

87 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Elementy nowoczesnego pośrednictwa graficznego: wstążka (MS SkyDrive)

88 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Elementy nowoczesnego pośrednictwa graficznego: pomoc, Pan Spinacz? Formaty plików pomocy: hlp, chm, Microsoft Help Viewer (mshc), html

89 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Standardowe okienka dialogowe (Office 2010 na górze, Windows Aero/Vista/7 na dole)

90 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D MS Windows TaskDialog (źródło: msdn) (niezgodny ze standardowym okienkiem dialogowym)

91 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Rich Internet Application (np. Flash): Sumopaint.com

92 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Budowanie pośrednictwa graficznego w stylu okienkowym:

93 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Interfejsy oparte na WWW/HTML (jqueryui - demo):

94 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Webowe interfejsy mobilne (jquery mobile):

95 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Webowe interfejsy mobilne: Adobe PhoneGap[Build]: kompilator w chmurze - aplikacje natywne

96 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Windows 8 Metro: wszędzie kafelki ;)

97 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Windows Phone 7, 8: też wszędzie kafelki ;) LiveTiles

98 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Android/iOS Human Interface Guidelines, zmiana orientacji, różne rozmiary ekranu

99 Linux + Compiz Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D film: Ubuntu 3D Desktop

100 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Windows Vista/7

101 Microsoft Surface Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D film: Surface 2 (2011r.)

102 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Projektowanie wieloplatformowego GUI: FireMonkey (win32, win64, OS X, ios)

103 Wstążka (ribbon) Pomoc kontekstowa i Okienka dialogowe Strony internetowe, Aplikacje webowe Interakcja dotykowa Nowoczesne pośrednictwa graficzne 3D Przykłady: FireMonkey ListBoxMagic, Style

104 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego:

105 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego: ˆ Kwestionariusze z pytaniami o opinie na temat interfejsu

106 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego: ˆ Kwestionariusze z pytaniami o opinie na temat interfejsu ˆ Obserwowanie użytkowników przy pracy z systemem

107 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego: ˆ Kwestionariusze z pytaniami o opinie na temat interfejsu ˆ Obserwowanie użytkowników przy pracy z systemem ˆ Krótkie filmy/screencasty z typowym użyciem systemu

108 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego: ˆ Kwestionariusze z pytaniami o opinie na temat interfejsu ˆ Obserwowanie użytkowników przy pracy z systemem ˆ Krótkie filmy/screencasty z typowym użyciem systemu ˆ Umieszczanie w oprogramowaniu kodu służącego do gromadzenia informacji o najczęściej używanych udogodnieniach systemu i najczęściej występujących błędach

109 Ocena GUI Wnioski sposoby oceny pośrednictwa graficznego: ˆ Kwestionariusze z pytaniami o opinie na temat interfejsu ˆ Obserwowanie użytkowników przy pracy z systemem ˆ Krótkie filmy/screencasty z typowym użyciem systemu ˆ Umieszczanie w oprogramowaniu kodu służącego do gromadzenia informacji o najczęściej używanych udogodnieniach systemu i najczęściej występujących błędach

110 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design

111 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność

112 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność licencjonowanie GUI - trolle patentowe

113 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność licencjonowanie GUI - trolle patentowe ˆ one click buy

114 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność licencjonowanie GUI - trolle patentowe ˆ one click buy ˆ MS Ribbon

115 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność licencjonowanie GUI - trolle patentowe ˆ one click buy ˆ MS Ribbon ˆ procesy Apple vs Samsung (odblokowywanie przez przesunięcie palcem po ekranie)

116 Ocena GUI Wnioski koncentracja na użytkowniku i jego doświadczeniu User Centered Design łatwość użycia a konfigurowalność licencjonowanie GUI - trolle patentowe ˆ one click buy ˆ MS Ribbon ˆ procesy Apple vs Samsung (odblokowywanie przez przesunięcie palcem po ekranie)

117 Ocena GUI Wnioski Dziękuję za uwagę Następny temat: analiza i projektowanie obiektowe