EPI Interfejs użytkownika - lab. 4

Post on 29-Nov-2014

174 views 5 download

description

 

Transcript of EPI Interfejs użytkownika - lab. 4

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