Netkata. PROCES projektowy Interfejsu Użytkownika. Spis treści. Netkata Interactive

Wielkość: px

Rozpocząć pokaz od strony:

Download "Netkata. PROCES projektowy Interfejsu Użytkownika. Spis treści. Netkata Interactive"

Danuta Wierzbicka
8 lat temu
Przeglądów:

1 Netkata PROCES projektowy Interfejsu Użytkownika Spis treści Projekt efektywnego UI Analiza biznesowa Analiza funkcjonalna Architektura informacji Interaktywne makiety Projekt graficzny Implementacja front-end... 7 Netkata Interactive Tomasz Sieroń, , tom@netkata.com Netkata Interactive 1

.. 4 4. Interaktywne makiety... 5 5. Projekt graficzny... 6 6. Implementacja front-end.

2 Projekt efektywnego UI Proponujemy proces projektowy interfejsu użytkownika, który umożliwi realizację systemu skutecznie adresującego postawione przed nim cele biznesowe, a zarazem zapewniającego pozytywny odbiór ze strony jego użytkowników. kiedy wdrożenie jest sukcesem? Podstawowym miernikiem sukcesu wdrożenia intranetu jest niewątpliwie jego skuteczność w realizacji celów biznesowych organizacji. Równie jednak istotne (a często pomijane) jest uzyskanie akceptacji, a wręcz entuzjazmu wśród jego finalnych użytkowników. Badania pokazują, że często intranety w firmach są po prostu ignorowane 57% użytkowników intranetów nie używa ich codziennie, co więcej aż 35% używa ich rzadziej niż raz na miesiąc (!) (Forrester Research, 2009). Wdrożenia kreujące tą statystykę trudno więc nazwać sukcesami. Jako przyczyny tego zjawiska wskazywane są głównie niesatysfakcjonujące doświadczenie użytkowników (User Experience, UX) oraz brak spójnej strategii zarządzania treściami. Równie więc istotnym wyzwaniem, co zapewnienie odpowiedniej funkcjonalności, okazuje się przekonanie użytkowników do jej faktycznego wykorzystywania. Projektowanie przyjaznych intranetów Z tego powodu proponujemy włączenie narzędzi projektowych skupiających się na użytkownikach i ich satysfakcji już na wczesnym etapie realizacji intranetu. Wykorzystywana przez nas metodyka projektowania Architektury Informacji i Interfejsu intranetów składa się z szeregu działań z obszarów analityki biznesowej i strategii marketingowej, elementów procesu Customer Development, wybranych narzędzi projektowych User Centered Design i badań użyteczności / UX. Taki dobór narzędzi zapewnia uwzględnienie potrzeb docelowych użytkowników intranetu już na etapie przygotowania specyfikacji systemu. Działania te porządkujemy w spójny proces, na który składają się następujące etapy: 1. Analiza biznesowa. 2. Analiza funkcjonalna. 3. Architektura informacji. 4. Interaktywne makiety. 5. Projekt graficzny interfejsu. 6. Implementacja interfejsu. Proponujemy realizację etapów przy zachowaniu powyższej kolejności produkty poprzedniego etapu stanowią następnie kluczową informację wejściową dla prac w etapie po nim następującym. Poniżej przedstawiono zakres prac realizowanych w każdym z etapów, wraz z jego produktami. Netkata Interactive 2

Podstawowym miernikiem sukcesu wdrożenia intranetu jest niewątpliwie jego skuteczność w realizacji celów biznesowych organizacji.

3 1. Analiza biznesowa Analiza biznesowo-marketingowa jest podstawą zarówno dla dalszych etapów prac z zakresu architektury informacji, jak i dla późniejszego opracowania projektu grafiki interfejsu. 1. Identyfikacja i analiza potrzeb, weryfikacja wymagań i uwarunkowań biznesowych. 2. Analiza kontekstu marketingowego, pozycjonowania marki i celów w zakresie PR wewnętrznego, a także dotychczas funkcjonujących rozwiązań. 3. Identyfikacja oraz charakteryzacja użytkowników identyfikacja ich kluczowych potrzeb, sposobów pracy, celów i ambicji. y em etapu analizy biznesowej jest Specyfikacja Biznesowa. 2. Analiza funkcjonalna Analiza wymagań na poziomie funkcjonalno-technicznym stanowi podstawę do przygotowania projektu technicznego intranetu. Projektanci interakcji pełnią na tym etapie rolę doradczą dla analityków IT planujących funkcjonalność. 1. Analiza wymagań funkcjonalnych i poza-funkcjonalnych. 2. Identyfikacja źródeł informacji. 3. Analiza kluczowych obszarów / segmentów / witryn systemu. 4. Analiza kluczowych procesów (workflows) w ramach każdego z obszarów systemu. 5. Szczegółowy opis działań w ramach procesów, diagramy procesów / user stories. 6. Specyfikacja produktów systemu. 7. Opis interfejsów z systemami trzecimi. 8. Identyfikacja użytkowników i ich ról. Netkata Interactive 3

Analiza kontekstu marketingowego, pozycjonowania marki i celów w zakresie PR wewnętrznego, a także dotychczas funkcjonujących rozwiązań. 3.

4 3. Architektura informacji Stworzenie na bazie wyników analizy kompletnego zestawienia stron i widoków, a także ich treści (tekstów, multimediów, bibliotek dokumentów, web parts), a następnie projekt struktury nawigacyjnej je łączącej. 1. Opracowanie mapy treści (Content Inventory) będącej zestawieniem tabelarycznym wszystkich witryn i ich widoków, stron, wraz z listą treści dostępnych na każdej ze stron. 2. Warsztaty z użytkownikami z użyciem narzędzi User Centered Design (card sorting) usystematyzowanie struktury nawigacji (opcjonalnie). 3. Struktura nawigacji i powiązań pomiędzy poszczególnymi witrynami i stronami intranetu. 4. Konsultacja z interesariuszami projektu. Mapa treści serwisu. Diagram struktury nawigacji. Netkata Interactive 4

Opracowanie mapy treści (Content Inventory) będącej zestawieniem tabelarycznym wszystkich witryn i ich widoków, stron, wraz z listą treści dostępnych na każdej ze stron. 2.

5 4. Interaktywne makiety Projekt interaktywnych makiet kompletu czarno-białych szkiców prezentujących rozłożenie treści na każdej ze stron systemu, z możliwością nawigacji pomiędzy widokami i symulacją działania elementów klikalnych, formularzy. 1. Projekt interaktywnych makiet systemu. 2. Badanie heurystyczne użyteczności makiet audyt ekspercki (opcjonalnie). 3. Projekt wersji mobilnej makiet (opcjonalnie) 4. Warsztat z interesariuszami projektu zatwierdzenie makiet. 5. Testy użyteczności makiet z udziałem użytkowników (opcjonalnie). 6. Analiza potencjału wprowadzenia mikro-interakcji w ramach makiet. Komplet interaktywnych makiet całego systemu dostępnych online, z możliwością zamieszczania komentarzy. Netkata Interactive 5

Projekt wersji mobilnej makiet (opcjonalnie) 4. Warsztat z interesariuszami projektu zatwierdzenie makiet. 5. Testy użyteczności makiet z udziałem użytkowników (opcjonalnie). 6.

6 5. Projekt graficzny Zebranie i analiza inspiracji graficznych, projekt różnych propozycji stylistki, a następnie iteracyjne dopracowanie wybranej propozycji. Przygotowanie szaty graficznej całego interfejsu. 1. Zebranie, analiza i omówienie inspiracji w zakresie grafiki na bazie wyników analizy biznesowej i systemu identyfikacji wizualnej marki klienta. 2. Projekt różnych propozycji estetyki intranetu (typowo 2 lub 3 różne stylistycznie propozycje, na przykładzie strony głównej) 3. Do 3 serii iteracji (poprawek) wybranej propozycji. 4. Projekt wyglądu wszystkich widoków serwisu, potrzebnych ilustracji/infografik, zakup fotografii, w razie potrzeby także wersji okolicznościowych (np. żałobna, świąteczna) i zoptymalizowanych pod względem dostępności (np. tryb wysokiego kontrastu). 5. Projekt wzorcowego szablonu UI ułatwiającego implementację nowych funkcjonalności w przyszłości obejmującego zestawienie wszystkich elementów składowych interfejsu: kontrolek formularzy, ikon, tabel, popupów, komunikatów walidacyjnych, etc. 6. Projekt wersji mobilnej interfejsu (opcjonalnie). Projekt graficzny całego interfejsu i wszystkich graficznych elementów uzupełniających. Netkata Interactive 6

Projekt różnych propozycji estetyki intranetu (typowo 2 lub 3 różne stylistycznie propozycje, na przykładzie strony głównej) 3. Do 3 serii iteracji (poprawek) wybranej propozycji. 4.

7 6. Implementacja front-end Wdrożenie interfejsu na bazie zaimplementowanej funkcjonalności. 1. Przygotowanie master pages oraz realizacja CSS dla wszystkich witryn i web parts. 2. Testy wersji desktop i mobile (Android, ios, Windows Phone). 3. Wsparcie w zakresie uruchomienia asysta i korekty CSS na etapie pierwszego zasilania treścią, stabilizacji systemu i odbioru. Intranet wyposażony w interfejs wysoce użyteczny, dopasowany do potrzeb użytkowników oraz systemu identyfikacji marki i skuteczny biznesowo. Zapraszamy do ROZMOWY! Jesteśmy otwarci na współpracę, chętnie też podzielimy się naszymi pomysłami i doświadczeniem. Tomasz Sieroń Telefon , Mail Skype Twitter tom@netkata.com Netkata Interactive 7

Wsparcie w zakresie uruchomienia asysta i korekty CSS na etapie pierwszego zasilania treścią, stabilizacji systemu i odbioru.

Podobne dokumenty

Netkata. Design of digital products. Netkata Interactive Media Marketing

Netkata. Design of digital products. Netkata Interactive Media Marketing Netkata Design of digital products AGENDA O firmie Netkata Nasi klienci Wybrane projekty Jak pracujemy Dlaczego Netkata? Porozmawiajmy! Co oferuje Netkata? Projektujemy i realizujemy strony www, aplikacje