CZYM ZAJMUJE SIĘ PROJEKTANT? oprac. K. Jamrozik

Transkrypt

1 CZYM ZAJMUJE SIĘ PROJEKTANT? oprac. K. Jamrozik Wykorzystana grafika pochodzi z publikacji Jennifer Niederst Robbins, Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po HTML5, CSS3 i grafice. Wyd. IV. Gliwice 2014.

2 Jakość a funkcjonalność Jakość 1. «wartość czegoś» 2. filoz. «istotne cechy przedmiotu wyróżniające go spośród innych» znak jakości «znaki (Q) lub (1), którymi opatrywane są towary bardzo dobrej jakości» Funkcjonalny 1. «dobrze spełniający swoją funkcję» 2. «dotyczący funkcjonowania lub funkcji czegoś w jakimś systemie» funkcjonalnie funkcjonalność

3 Funkcjonalność Z poradni języka polskiego: Szanowni Państwo, ostatnio bardzo często słyszy się, że pewne programy mają takie czy inne funkcjonalności. Czy mamy tu do czynienia z przesunięciem znaczenia czy to po prostu błąd i należy mówić o funkcjach? Odpowiedź: Tradycyjnie rzecz ujmując, funkcjonalność to rzeczownik abstrakcyjny utworzony od przymiotnika funkcjonalny ( odpowiadający czyimś potrzebom i dobrze spełniający swoją funkcję ), np. To mieszkanie było funkcjonalne Zachwyciła go funkcjonalność tego mieszkania. Ostatnio słowo to pojawia się w opisach różnych urządzeń elektronicznych w znaczeniu funkcja. Ja uważam to za nadużycie, nie widzę bowiem żadnej różnicy między nowymi funkcjami telefonu a nowymi funkcjonalnościami telefonu. Jeśli ktoś mnie do tego przekona, to zwrócę honor (jemu i funkcjonalności). Katarzyna Kłosińska, Uniwersytet Warszawski

4 Zadania projektanta 1. Projektowanie doznań, interakcji i interfejsu użytkownika, projektowanie wizualne (graficzne) 2. Wytwarzanie przygotowywanie treści definiowanie wyglądu tworzenie skryptów i programowanie 3. Tworzenie treści i zarządzanie nią 4. Multimedia + technologia flash

5 Projektowanie doznań, interakcji i interfejsu użytkownika 1. Projektowanie interakcji (ang. Interaction Design IxD) celem projektanta interakcji jest sprawienie, by strona była prosta w obsłudze i efektywna, a korzystanie z niej sprawiało użytkownikowi radość. 2. Projektowanie interfejsu użytkownika (ang. User Interface UI) zagadnienia koncentrujące się na funkcjonalnej organizacji witryny oraz jej elementów (przycisków, odsyłaczy, menu itd.) służących do nawigacji i wykonywania zadań. 3. Projektowanie doznań (ang. User Experience IJX) funkcja projektanta doznań użytkowników pojawiła się stosunkowo niedawno. Jego zadaniem jest spojrzenie z szerszej perspektywy i zadbanie o to, by korzystanie z witryny przyniosło użytkownikowi jak najbardziej pozytywne doznania. Podczas projektowania UX bazuje się na wiedzy o użytkownikach oraz wzorcach ich zachowań, którą uzyskuje się dzięki obserwacjom i rozmowom. Według Donalda Normana (który ukuł ten termin) projektowanie doznań użytkowników łączy w sobie wszelkie aspekty interakcji użytkownika z produktem.

6 Projektowanie wizualne (graficzne) Ponieważ internet jest medium wizualnym, strony internetowe wymagają zwrócenia szczególnej uwagi na prezentację oraz projekt graficzny. Projektant graficzny odpowiada za wygląd i zachowanie (ang. look and feel) witryny, a więc logo, elementy graficzne, kroje pisma, kolorystykę, layout itp. Musi sprawić, by projekt był zgodny z. identyfikacją wizualną instytucji, dla której powstaje. Projektant przeważnie przygotowuje szkice przedstawiające różne wersje wyglądu witryny. Może być również odpowiedzialny za utworzenie plików graficznych zoptymalizowanych pod kątem publikowania w internecie.

7 Wytwarzanie Spora część procesu projektowania stron internetowych to tworzenie dokumentów, arkuszy stylów, skryptów oraz obrazków, które składają się na stronę. W firmach zajmujących się projektowaniem stron internetowych zespół odpowiedzialny za te zadania jest zwykle określany jako Web Development, co oznacza wytwarzanie bądź produkcję. Deweloperzy nie są zazwyczaj odpowiedzialni za projektowanie wyglądu witryny ani jej struktury, ale muszą być w stałym kontakcie z projektantami, by zrozumieć cele stawiane witrynie i zastosować takie rozwiązania, które najlepiej sprawdzą się wdanym przypadku. Jest to bardzo szeroka dyscyplina, na którą składają się bardziej szczegółowe grupy zadań: przygotowywanie treści, definiowanie wyglądu i stylów oraz tworzenie skryptów i programowanie.

8 Tworzenie treści i zarządzanie nią Pierwsze zadanie w procesie tworzenia strony jest związane z zawartością witryny. Każdy, kto uważa się za projektanta stron, musi mieć na uwadze wszystko, co jest związane z dostarczaniem użytkownikom treści, przekazu i funkcjonalności. Co więcej, dobrze opracowana zawartość może pomóc w stworzeniu doskonalszego interfejsu użytkownika. Oczywiście ktoś musi być odpowiedzialny za tworzenie treści i zarządzanie nią. Często nie docenia się tego etapu i związanych z nim trudności. Duże zespoły pra cujące nad tworzeniem witryn niejednokrotnie mają w swoich szeregach specjalistów zajmujących się tym aspektem projektu: stratega zawartości (ang. Gonieni Stratcgist) oraz architekta informacji (ang. Information Architect).

9 Narzędzia wykorzystywane przez projektantów 1. raporty z badań i testów 2. szkice stron 3. diagramy witryny 4. storyboardy i diagramy przepływu interakcji

10 Raporty z badań i testów Kluczem do udanego projektu witryny lub aplikacji internetowej jest zrozumienie potrzeb i pragnień użytkowników oraz postawionych ograniczeń. Tego typu podejście do projektowania skoncentrowane na potrzebach użytkowników (określane skrótem UCD ang. User Centered Design) jest obecnie bardzo popularne. Projektowanie witryny można rozpocząć od przeprowadzenia badań wśród przyszłych użytkowników, które najczęściej polegają na rozmowach i obserwacjach.

11 Szkice stron Na szkicach przedstawia się strukturę strony w maksymalnie uproszczonej postaci za pomocą obrysów znajdujących się na niej bloków zawartości oraz widżetów (rysunek 1.1). Głównym celem tworzenia szkiców jest określenie podziału ekranu, a także rozmieszczenia na nim poszczególnych treści oraz elementów funkcjonalnych, takich jak nawigacja, pole wyszukiwania czy formularze. Zastosowanie jedynie obrysów, a więc odrzucenie wszelkich ozdobników i elementów graficznych, zwiększa czytelność. Na szkicach przeważnie umieszcza się dopiski z informacjami o sposobie działania danej strony, co jest istotną wskazówką dla zespołu realizującego projekt.

12 Narzędzia wykorzystywane przez projektantów Narzędzia wykorzystywane przez projektantów raporty z badań i testów szkice stron diagramy witryny storyboardy i diagramy przepływu interakcji

13 Diagramy witryny Diagram witryny przedstawia strukturę całej witryny, a więc wszelkie powiązania między poszczególnymi stronami. Na kolejnym slajdzie widać przykładowy diagram prostej witryny. Jak łatwo sobie wyobrazić, w przypadku niektórych witryn diagram mógłby zająć całą ścianę.

14

15 Storyboardy i diagramy przepływu interakcji Storyboard (czyli obrazkowy scenopis) przedstawia sposób działania witryny lub aplikacji z punktu widzenia typowego użytkownika (w języku projektowania doznań określa się go mianem persony). Zwykle zawiera scenariusz i sceny będące widokami ekranu lub rysunkami przedstawiającymi interakcję użytkownika z ekranem. Celem tworzenia storyboardów jest zobrazowanie elementarnych działań prowadzących do wykonania zadania oraz dostępnych możliwości, a także zaproponowanie standardowych rozwiązań. Inną metodą zobrazowania powiązań między poszczególnymi elementami witryny lub aplikacji są diagramy przepływu interakcji. Jednak w tym przypadku uwagę skupia się nie na opisie funkcjonalności, a na technicznych aspektach, na przykład: kiedy użytkownik zrobi to, zostanie wywołana taka funkcja na serwerze. Zwykle tworzy się tego typu diagramy dla operacji takich jak rejestracja użytkowników czy płatności online.

16