Ux Upgerde_Symetria_Projektowanie responsywnych treści

58
UX Upgrade: część I Projektowanie treści

description

 

Transcript of Ux Upgerde_Symetria_Projektowanie responsywnych treści

Page 1: Ux Upgerde_Symetria_Projektowanie responsywnych treści

UX Upgrade: część I

Projektowanie treści

Page 2: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Poznajmy się

Wojtek ChojnackiStrategy & Development Leader

7 lat doświadczenia

Badania UX, Projektowanie UX,Strategia treści

Philip Morris International, BZ WBK, Credit Agricole, Link4, Orange

8.04.2023 UX Upgrade - Treść 2

Page 3: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Przecież miało być o projektowaniu!

Czyli dlaczego zaczynamy od treści

8.04.2023 UX Upgrade - Treść 3

Page 4: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Dawno, dawno temuRWD – koncepcja ciągle ewoluująca

8.04.2023 UX Upgrade - Treść 4

Page 5: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Po czym poznać serwis responsywny?

„Poznam, gdy zobaczę” ?

8.04.2023 UX Upgrade - Treść 5

Page 6: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Co charakteryzuje serwis responsywny1.Rozmiar okna wpływa na konstrukcję strony 2.Elementy są prezentowane odpowiednio do rozmiaru okna (płynność)3.Adresy stron i treść pozostają niezmienne między urządzeniami *

Breakpointy

Płynność treści

Równość treści

http://worldwildlife.org/ 8.04.2023 UX Upgrade - Treść 6

Page 7: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Istota responsywności

Efektywne przekazanie treści niezależnie od rozmiaru i typu ekranu użytkownika

8.04.2023 UX Upgrade - Treść 7

Page 8: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Serwisy mobile a serwisy responsywne

Dedykowany serwis mobilny

Treść desktop Treść mobile Treść serwisu

Serwis responsywny

Użytkownik desktop

Użytkownik mobile Użytkownik desktop

Użytkownik mobile

8.04.2023 UX Upgrade - Treść 8

Page 9: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Konsekwencje RWD dla treści

8.04.2023 UX Upgrade - Treść 9

Page 10: Ux Upgerde_Symetria_Projektowanie responsywnych treści

+ Jeden serwis = centralne zarządzanieEdytujemy treść dla wszystkich urządzeń naraz.Brak duplikacji treści, potencjalnie lepsze SEO.

http://www.site-ninja.com/ 8.04.2023 UX Upgrade - Treść 10

Page 11: Ux Upgerde_Symetria_Projektowanie responsywnych treści

+Spójna treść na każdym urządzeniuUżytkownicy mają pewność, że dzieląc się treścią nie będzie problemu z dostępem do niej.

8.04.2023 UX Upgrade - Treść 11

Page 12: Ux Upgerde_Symetria_Projektowanie responsywnych treści

- Nie każdą treść łatwo uelastycznićSzczególnie w istniejących serwisach

8.04.2023 UX Upgrade - Treść 12

Page 13: Ux Upgerde_Symetria_Projektowanie responsywnych treści

- Ograniczenia w tworzeniu osobnego przekazu mobileAle…

http://www.telegraph.co.uk/ 8.04.2023 UX Upgrade - Treść 13

Page 14: Ux Upgerde_Symetria_Projektowanie responsywnych treści

… mobilni użytkownicy to niekoniecznie inny światPotrzebują oni tych samych informacji i równego traktowania! Często skupiają się oni na swoim urządzeniu bardziej niż inni.http://uxmag.com/articles/six-mobile-myths

http://www.google.com/think/research-studies/our-mobile-planet-united-states.html

14

Page 15: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Użytkownicy o wielu ekranach

90% użytkowników przemieszcza się między urządzeniami żeby osiągnąć cel, uwzględniając smartfony, PCty, tablety i TV.

Źródło: badanie Multiscreen World, Googlehttp://services.google.com/fh/files/misc/multiscreenworld_final.pdf

8.04.2023 UX Upgrade - Treść 15

Page 16: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Serwisy mobilne to nie serwisy dla „mniej wymagających”!

… it may not be rolled in our mobile site.

8.04.2023 UX Upgrade - Treść 16

Page 17: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Do przemyślenia

There is no Mobile Web.

There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.

@stephenhay

8.04.2023 UX Upgrade - Treść 17

Page 18: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Nasz cel

Planując responsywną treść musimy:

1.Zbudować zasady tworzenia uniwersalnej treści.

2.Dobrać formy prezentacji treści dla każdego pola widzenia

8.04.2023 UX Upgrade - Treść 18

Page 19: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Uniwersalna treść

Strukturyzacja treści i content strategy

8.04.2023 UX Upgrade - Treść 19

Page 20: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Jak powinna skalować się treść serwisu?

8.04.2023 UX Upgrade - Treść 20

Page 21: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Odpowiedzi należy szukać element po elemencie.

8.04.2023 UX Upgrade - Treść 21

Page 22: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Case study: Crayola.comhttp://danielmall.com/work/crayola/

8.04.2023 UX Upgrade - Treść 22

Page 23: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Typy treści, zbudowane z powtarzalnych elementówBiblioteka elementów treści pomaga nam je następnie zaprojektować.

8.04.2023 UX Upgrade - Treść 23

Page 24: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Hierarchia treści serwisu

1. Główne przekazy całego serwisu

2. Typy stron wypełniające te przekazy

3. Typy treści, które składają się na strony.

4. Sposoby prezentacji dla każdego typu treści.

8.04.2023 UX Upgrade - Treść 24

Page 25: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Zarządzanie strukturyzowaną treścią

Zasady dla treści tworzymy rozbijając ją na mniejsze elementy i definiując ich cele i sposoby prezentacji.

Więcej na ten temat: http://alistapart.com/article/future-ready-content

Typ strony Typy treści w ramach strony

Reprezentacja w CMS

8.04.2023 UX Upgrade - Treść 25

Page 26: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Zalety strukturyzowania treści na przykładzie National Public Radio

8.04.2023 UX Upgrade - Treść 26

Page 27: Ux Upgerde_Symetria_Projektowanie responsywnych treści

COPE – Create Once, Publish Everywhere

+ 80% pageviews

8.04.2023 UX Upgrade - Treść 27

Page 28: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Case study:Credit-agricole.pl

Strategia treści i jej wpływ na projektowanie

8.04.2023 UX Upgrade - Treść 28

Page 29: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Motto marki: „Prosto i z sensem”

8.04.2023 UX Upgrade - Treść 29

Page 30: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Przeprojektowanie serwisu „Klub rabatowy Credit Agricole”

http://klubrabatowy.credit-agricole.pl

Zmiana interfejsu (RWD) przyniosła świetne wyniki.

8.04.2023 UX Upgrade - Treść 30

Page 31: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Badania z użytkownikami pokazały pewne problemy.

Efektywność serwisu pozostawiała trochę do życzenia.

Credit-agricole.pl

8.04.2023 UX Upgrade - Treść 31

Page 32: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Credit-agricole.pl

Home page Strona kategorii

Szczegóły produktu

Przejścia do:- Infolinia: +225%- Oddziały +326%

Spadek wyszukiwań informacji kontaktowych: -70,05%

8.04.2023 UX Upgrade - Treść 32

Page 33: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Credit-agricole.pl – strona kategorii

• Wiele podobnych produktów• Skupienie tylko na zaletach utrudnia wybór

8.04.2023 UX Upgrade - Treść 33

Page 34: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Credit-agricole.pl – strona produktu

• Zatłoczony layout• Dużo uwagi potrzebnej by wyciągnąć najważniejsze

fakty• „Przeciętna strona banku”

8.04.2023 UX Upgrade - Treść 34

Page 35: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Podejście do projektu

Zauważone problemy nie wynikały tylko z projektu interfejsu.

Nie wystarczyło więc przeprojektować serwis.

Konieczne było przebudowanie treści.

8.04.2023 UX Upgrade - Treść 35

Page 36: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Etapy prac

Warsztaty strategii treści

Projektowanie User Experience

Nowy serwis

Wymagania i struktura treści

Copywriting Wdrożenie

8.04.2023 UX Upgrade - Treść 36

Page 37: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Project stakeholders

Warsztaty strategii treści

Menedżerowie produktu

Public Relations

MarketingMarketing online

(lider projektu)

8.04.2023 UX Upgrade - Treść 37

Page 38: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Warsztaty strategii treściWarsztat 1: Użytkownicy i ich potrzeby względem treściWarsztat 2: Wymagania dla treści

8.04.2023 UX Upgrade - Treść 38

Page 39: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Efekty warsztatów

Persony (4 grupy docelowe)

Kryteria wyboru produktów i potrzeb informacyjnych

8.04.2023 UX Upgrade - Treść 39

Page 40: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Efekty prac nad treścią

Mapa rodzajów stron

Szablony treści wraz z wymaganiami

8.04.2023 UX Upgrade - Treść 40

Page 41: Ux Upgerde_Symetria_Projektowanie responsywnych treści

WymaganiaPrzykład

zastosowania

Element struktur

y

Content templates / stylebook

8.04.2023 UX Upgrade - Treść 41

Page 42: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Nominacja

Finalny serwis4 punkty przełamania, dopasowana treść

8.04.2023 UX Upgrade - Treść 42

Page 43: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Treść zwinięta do haseł, szczegóły na żądanie

8.04.2023

UX Upgrade - Treść 43

Page 44: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Dodatkowa treść przydatna w kontekście mobilnym

8.04.2023 UX Upgrade - Treść 44

Page 45: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Elastyczne prezentowanie treści

Narzędzia i strategie A.D. 2014

8.04.2023 UX Upgrade - Treść 45

Page 46: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Elastyczne prezentowanie treści

Teksty

Obrazy i ikony

Tabele

Co z video?

8.04.2023 UX Upgrade - Treść 46

Page 47: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne tekstyGłówne wyzwanie: różne zasady obliczania rozmiaru fontu i odległości od oka.http://ia.net/blog/responsive-typography-the-basics/

8.04.2023 UX Upgrade - Treść 47

Page 48: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne teksty w pigułce

Główne strategie:• Stała szerokość bloku + przeformatowanie w breakpointach• Rozszerzanie w nieskończoność ze skalowaniem tekstu• Rozszerzanie do czytelnego maksimum

Przemyśl/sprawdź:• Dostępność fontu urządzeniach mobilnych• Rozmiar fontu na różnych urządzeniach, przy różnych odległościach

czytania• Długość nagłówków i innych wyróżnionych elementów

typograficznych na urządzeniach mobilnych• Długość linii (sugerowane 50-75 znaków)• Czytelność tekstu na tle obrazów przy różnych rozdzielczościach

Materiały do poczytania:http://ia.net/blog/responsive-typography-the-basics/ http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/ http://baymard.com/blog/line-length-readability http://nicewebtype.com/notes/responsive-typography/

8.04.2023 UX Upgrade - Treść 48

Page 49: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne obrazyGłówne wyzwanie: dostosowanie do proporcji obrazu, ograniczenie przesyłu danych

8.04.2023 UX Upgrade - Treść 49

Page 50: Ux Upgerde_Symetria_Projektowanie responsywnych treści

http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/

Kadrowanie przez wyznaczenie „punktu skupienia

Responsywne obrazy – strategia kadrowania

8.04.2023 UX Upgrade - Treść 50

Page 51: Ux Upgerde_Symetria_Projektowanie responsywnych treści

http://useiconic.com/

Responsywne ikonyJeśli działają jak fonty, mogą dopasowywać swoje detale do rozmiaru.

8.04.2023 UX Upgrade - Treść 51

Page 52: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne obrazy w pigułce

Główne strategie:1. Ograniczanie obrazów rastrowych kosztem SVG2. Inteligentne kadrowanie tam, gdzie obraz jest bardziej dekoracją3. Skalowanie tam, gdzie cały obraz stanowi kompletny przekaz4. Responsywne ikony (najlepiej w formie web fontów)

Przemyśl/sprawdź:5. Dostępność fontu urządzeniach mobilnych6. Rozmiar fontu na różnych urządzeniach, przy różnych odległościach

czytania7. Długość nagłówków i innych wyróżnionych elementów

typograficznych na urządzeniach mobilnych8. Długość linii (sugerowane 50-75 znaków)9. Czytelność tekstu na tle obrazów przy różnych rozdzielczościachMateriały do poczytania:http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/ http://alistapart.com/article/mo-pixels-mo-problems http://symbolset.com/icons http://useiconic.com/https://docs.google.com/spreadsheet/ccc?key=0Al0lI17fOl9DdDgxTFVoRzFpV3VCdHk2NTBmdVI2OXc#gid=0

8.04.2023 UX Upgrade - Treść 52

Page 53: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne tabeleGłówne wyzwanie: jak pokazać je czytelnie bez zubożenia warstwy informacyjnej

http://css-tricks.com/responsive-data-table-roundup/

8.04.2023 UX Upgrade - Treść 53

Page 54: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Responsywne tabele w pigułce

Główne strategie:1. Ukrywanie kolumn2. Rozbijanie tabel na rekordy3. Transformacja w wykresy4. Przewijanie horyzontalne

Przemyśl/sprawdź:5. Czy możliwe jest wskazanie najważniejszych kolumn i schowanie

drugorzędnych?6. Sposób korzystania z tabeli – czy kluczowe jest

• znalezienie właściwego wiersza?• porównanie wierszy kolumna po kolumnie? • ogólne podsumowanie?

Materiały do poczytania:http://css-tricks.com/responsive-data-table-roundup/http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/http://www.zurb.com/playground/responsive-tables

8.04.2023 UX Upgrade - Treść 54

Page 55: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Na zakończenie

Page 56: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Na zakończenie

Podejście „One Web”RWD to sposób na znalezienie złotego środka między platformami bez upośledzania którejkolwiek z grup użytkowników i spiętrzania kosztów zarządzania.http://www.w3.org/TR/mobile-bp/

Treść gotowa na przyszłośćPlanując uniwersalne treści uniezależniamy się od obecnych i przyszłych urządzeń i sposobów wyświetlania.http://futurefriendlyweb.com/

Mobile firstRozwijając sposoby prezentacji treści dla różnych ekranów poczynając od niewielkich, mamy szansę naprawdę uzyskać serwis dla wszystkich, który nie jest dla nikogo.

8.04.2023 UX Upgrade - Treść 56

Page 57: Ux Upgerde_Symetria_Projektowanie responsywnych treści

Dziękuję za uwagę

Wojtek ChojnackiStrategy & Development [email protected]

8.04.2023 UX Upgrade - Treść 57

Page 58: Ux Upgerde_Symetria_Projektowanie responsywnych treści