epi interfejs użytkownika - lab. 4
DESCRIPTION
TRANSCRIPT
A PROPOS SPÓJNOŚCI...
Ideate PrototypeResearch
ZASADY BURZY MÓZGÓW:1. Każdy ma prawo zgłosić dowolną liczbę pomysłów.2. Ważna jest liczba, a nie jakość pomysłów.3. Pomysły nie mogą być przez nikogo oceniane, krytykowane
i komentowane.4. Można korzystać z wcześniej zgłoszonych pomysłów, zmieniać je
lub rozwijać.5. Nie notuje się autora pomysłu.6. Pomysły mogą być najbardziej śmiałe i niedorzeczne.7. Głosu udziela prowadzący sesję.8. Pomysły powinny być notowane na tablicy, ewentualne w zeszycie
(wybieramy sekretarza).
PERSONY I SCENARIUSZE
CUSTOMER JOURNEY CANVAS:an oriented graph that describes the journey of a user by representing the different touchpoints that characterize his interaction with the service.
/ www.servicedesigntools.org/tools/8
CUSTOMER JOURNEY CANVAS
Customer / User JourneyWhich touch-points do customers/users experience during their journey?Are there any "critical" touch-points where the customer/user's experience is particularly good or bad?
Advertising / Public RelationsHow is the product/service communicated by the organization?
Social MediaWhat information can people access through social media?
Word of MouthWhat do friends, colleagues and family say about the product/service?
Past experiencesWhat experiences does the user have with this or similar products/services?
Customer Relationship ManagementHow does the organization follow-up with customers/users?
Social MediaHow and what do customers/users communicate product/service through social media?
Word of MouthWhat do customers/users tell friends, colleagues and family about the product/service?
Customer Journey Canvas
ExpectationsWhat are the user's expectations towards the product/service?
Before
ExperienceWhat are the individual experiences the customer/user has with the product/service during their journey?
During
Satisfaction - DissatisfactionHow has the customer assessed their experiences compared to their expectations?
After
Persona Produc t / se r v i ce C l i en t Des i gn t eam
Prototype SelectIdeate
WZORZEC PROJEKTOWY:uniwersalne, sprawdzone w praktyce rozwiązanie często pojawiających się, powtarzalnych problemów projektowych. [...] Jest opisem rozwiązania, a nie jego implementacją.
/ Wikipedia
MAKIETA:wizualizacja rozmieszczenia elementów interfejsu
PROTOTYP:makieta, na której można sprawdzić interakcję z produktem(klikalna)
/ www.webaudit.pl/blog/2008/makiety-prototypy-i-6-popularnych-bledowinteraktywnie.com/biznes/blog-ekspercki/design/miedzy-briefem-a-grafika-czyli-jak-zrozumiec-makiety-21226
MAKIETY LO-FI I HI-FI
KISS:KEEP IT SIMPLE,STUPID!
CZTERY STRATEGIE OSIĄGANIA PROSTOTY:
usuwanieorganizacjaukrywanieprzenoszenie
/ Giles Colborne
TIMTOWDI (TIM TOADY):
There Is More Than One Way To Do It
...ORAZ CO MOŻEMY DODAĆ?
...I JAK TO POUKŁADAĆ?
STRONA GŁÓWNA
O studiach
Współpraca
Dzień otwarty
Aktualności Lista projektów Działalność
Animacje
Animacja i film
Estetyka I sem.
Estetyka II sem.
CGI
Plan roku akad.
Harmonogramy
Plan studiów
Sylabusy > USOS
Nowe zasady...
Wzory podań
Spis przedmiotów
Informacjeo studiach
Prezentacjakierunku
Rekrutacja I stopień
Komunikatydla I roku
Rekrutacja II stopień
Inicjatywystudenckie
WykładowcyDla kandydatów KontaktDla studentów Projekty studenckie
www.epi.uj.edu.pl
STRONA GŁÓWNA
Kontakt
Studia I stopnia
Studia II stopnia
HarmonogramyO studiach Prace mgr - wymogiRektrutacja Aktualności
www.epi.uj.edu.pl/m
PROBLEM Z TYTUŁEM SEKCJITO ZŁA ZAWARTOŚĆ SEKCJI
/ Jennifer Tidwell
ELEMENTY I STRUKTURAINTERFEJSU
STRUKTURY STRONY:
Informacyjna – element i lista elementów (przeglądanie, wyszukiwanie, ekspozycja)Kreacyjna – pole komentarza, personalizacja ustawieńProcesowa – wykonywanie czynności (kreatory, formularze)
/ Theresa Neil
1.EKSPOZYCJAELEMENTÓW
HIERARCHIA WIZUALNAakcent na najważniejsze elementy
PRZYZWYCZAJENIE
„ŚLEPOTA NA REKLAMY”
„ŚLEPOTA NA REKLAMY”
WZORCE PROJEKTOWE
PARALLAX SCROLLNawigacja czy układ elementów?
EKSPOZYCJA, WYSZUKIWANIE I PRZEGLĄDANIE
AKTUALNOŚCI
PULPIT
80% CZYNNOŚCI POWINNO BYĆ OSIĄGALNE Z POZIOMU PULPITU
KREATOR
RÓŻNE WIDOKI
2.ORGANIZACJAELEMENTÓW
PROJEKTUJEMY TAK, ABY USER ZOBACZYŁ TO, CO CHCEMY MU POKAZAĆ :)
PRZEPŁYW WZROKUwarto umieszczać elementy tam, gdzie user spodziewa sie je zobaczyć
PRAWA GESTALT
PRAWA GESTALT
WZORCE PROJEKTOWE
RAMY GRAFICZNE
OBSZAR CENTRALNY
SIATKA RÓWNOPRAWNYCH ELEMENTÓW
ZATYTUŁOWANE SEKCJE
ZAKŁADKI
AKORDEON
ZWIJANE / RUCHOME PANELE
UJAWNIANIE / ODBLOKOWYWANIE REAKCYJNE
3.NAWIGACJA
MODELE NAWIGACJI
globalna
funkcyjna
asocjacyjna
/ Jennifer Tidwell
CO NAJWAŻNIEJSZE W MENU?
WZORCE PROJEKTOWE
WSKAZANE PUNKTY STARTOWE
GRUBE MENU
HAMBURGER
SPIS TREŚCI
PIRAMIDA
PANEL MODALNY
MAPA SEKWENCJI
WYJŚCIE EWAKUACYJNE
MAPA STRONY W STOPCE
OKRUSZKI