EPI Interfejs użytkownika - lab. 4

69
A PROPOS SPÓJNOŚCI...

description

 

Transcript of EPI Interfejs użytkownika - lab. 4

Page 1: EPI Interfejs użytkownika - lab. 4

A PROPOS SPÓJNOŚCI...

Page 2: EPI Interfejs użytkownika - lab. 4
Page 3: EPI Interfejs użytkownika - lab. 4
Page 4: EPI Interfejs użytkownika - lab. 4
Page 5: EPI Interfejs użytkownika - lab. 4
Page 6: EPI Interfejs użytkownika - lab. 4
Page 7: EPI Interfejs użytkownika - lab. 4

Ideate PrototypeResearch

Page 8: EPI Interfejs użytkownika - lab. 4

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).

Page 9: EPI Interfejs użytkownika - lab. 4

PERSONY I SCENARIUSZE

Page 10: EPI Interfejs użytkownika - lab. 4

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

Page 11: EPI Interfejs użytkownika - lab. 4

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

Page 12: EPI Interfejs użytkownika - lab. 4

Prototype SelectIdeate

Page 13: EPI Interfejs użytkownika - lab. 4

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

Page 14: EPI Interfejs użytkownika - lab. 4

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

Page 15: EPI Interfejs użytkownika - lab. 4

MAKIETY LO-FI I HI-FI

Page 16: EPI Interfejs użytkownika - lab. 4

KISS:KEEP IT SIMPLE,STUPID!

Page 17: EPI Interfejs użytkownika - lab. 4
Page 18: EPI Interfejs użytkownika - lab. 4

CZTERY STRATEGIE OSIĄGANIA PROSTOTY:

usuwanieorganizacjaukrywanieprzenoszenie

/ Giles Colborne

Page 19: EPI Interfejs użytkownika - lab. 4
Page 20: EPI Interfejs użytkownika - lab. 4

TIMTOWDI (TIM TOADY):

There Is More Than One Way To Do It

Page 21: EPI Interfejs użytkownika - lab. 4

...ORAZ CO MOŻEMY DODAĆ?

Page 22: EPI Interfejs użytkownika - lab. 4

...I JAK TO POUKŁADAĆ?

Page 23: EPI Interfejs użytkownika - lab. 4

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

Page 24: EPI Interfejs użytkownika - lab. 4

STRONA GŁÓWNA

Kontakt

Studia I stopnia

Studia II stopnia

HarmonogramyO studiach Prace mgr - wymogiRektrutacja Aktualności

www.epi.uj.edu.pl/m

Page 25: EPI Interfejs użytkownika - lab. 4

PROBLEM Z TYTUŁEM SEKCJITO ZŁA ZAWARTOŚĆ SEKCJI

/ Jennifer Tidwell

Page 26: EPI Interfejs użytkownika - lab. 4

ELEMENTY I STRUKTURAINTERFEJSU

Page 27: EPI Interfejs użytkownika - lab. 4

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

Page 28: EPI Interfejs użytkownika - lab. 4

1.EKSPOZYCJAELEMENTÓW

Page 29: EPI Interfejs użytkownika - lab. 4

HIERARCHIA WIZUALNAakcent na najważniejsze elementy

Page 30: EPI Interfejs użytkownika - lab. 4

PRZYZWYCZAJENIE

Page 31: EPI Interfejs użytkownika - lab. 4

„ŚLEPOTA NA REKLAMY”

Page 32: EPI Interfejs użytkownika - lab. 4

„ŚLEPOTA NA REKLAMY”

Page 33: EPI Interfejs użytkownika - lab. 4

WZORCE PROJEKTOWE

Page 34: EPI Interfejs użytkownika - lab. 4

PARALLAX SCROLLNawigacja czy układ elementów?

Page 35: EPI Interfejs użytkownika - lab. 4

EKSPOZYCJA, WYSZUKIWANIE I PRZEGLĄDANIE

Page 36: EPI Interfejs użytkownika - lab. 4

AKTUALNOŚCI

Page 37: EPI Interfejs użytkownika - lab. 4

PULPIT

Page 38: EPI Interfejs użytkownika - lab. 4

80% CZYNNOŚCI POWINNO BYĆ OSIĄGALNE Z POZIOMU PULPITU

Page 39: EPI Interfejs użytkownika - lab. 4

KREATOR

Page 40: EPI Interfejs użytkownika - lab. 4

RÓŻNE WIDOKI

Page 41: EPI Interfejs użytkownika - lab. 4

2.ORGANIZACJAELEMENTÓW

Page 42: EPI Interfejs użytkownika - lab. 4

PROJEKTUJEMY TAK, ABY USER ZOBACZYŁ TO, CO CHCEMY MU POKAZAĆ :)

Page 43: EPI Interfejs użytkownika - lab. 4

PRZEPŁYW WZROKUwarto umieszczać elementy tam, gdzie user spodziewa sie je zobaczyć

Page 44: EPI Interfejs użytkownika - lab. 4

PRAWA GESTALT

Page 45: EPI Interfejs użytkownika - lab. 4

PRAWA GESTALT

Page 46: EPI Interfejs użytkownika - lab. 4

WZORCE PROJEKTOWE

Page 47: EPI Interfejs użytkownika - lab. 4

RAMY GRAFICZNE

Page 48: EPI Interfejs użytkownika - lab. 4

OBSZAR CENTRALNY

Page 49: EPI Interfejs użytkownika - lab. 4

SIATKA RÓWNOPRAWNYCH ELEMENTÓW

Page 50: EPI Interfejs użytkownika - lab. 4

ZATYTUŁOWANE SEKCJE

Page 51: EPI Interfejs użytkownika - lab. 4

ZAKŁADKI

Page 52: EPI Interfejs użytkownika - lab. 4

AKORDEON

Page 53: EPI Interfejs użytkownika - lab. 4

ZWIJANE / RUCHOME PANELE

Page 54: EPI Interfejs użytkownika - lab. 4

UJAWNIANIE / ODBLOKOWYWANIE REAKCYJNE

Page 55: EPI Interfejs użytkownika - lab. 4

3.NAWIGACJA

Page 56: EPI Interfejs użytkownika - lab. 4

MODELE NAWIGACJI

globalna

funkcyjna

asocjacyjna

/ Jennifer Tidwell

Page 57: EPI Interfejs użytkownika - lab. 4
Page 58: EPI Interfejs użytkownika - lab. 4

CO NAJWAŻNIEJSZE W MENU?

Page 59: EPI Interfejs użytkownika - lab. 4

WZORCE PROJEKTOWE

Page 60: EPI Interfejs użytkownika - lab. 4

WSKAZANE PUNKTY STARTOWE

Page 61: EPI Interfejs użytkownika - lab. 4

GRUBE MENU

Page 62: EPI Interfejs użytkownika - lab. 4

HAMBURGER

Page 63: EPI Interfejs użytkownika - lab. 4

SPIS TREŚCI

Page 64: EPI Interfejs użytkownika - lab. 4

PIRAMIDA

Page 65: EPI Interfejs użytkownika - lab. 4

PANEL MODALNY

Page 66: EPI Interfejs użytkownika - lab. 4

MAPA SEKWENCJI

Page 67: EPI Interfejs użytkownika - lab. 4

WYJŚCIE EWAKUACYJNE

Page 68: EPI Interfejs użytkownika - lab. 4

MAPA STRONY W STOPCE

Page 69: EPI Interfejs użytkownika - lab. 4

OKRUSZKI