Ux Upgerde_Symetria_Projektowanie responsywnych treści

UX Upgrade: część I

Projektowanie 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

Przecież miało być o projektowaniu!

Czyli dlaczego zaczynamy od treści

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

Po czym poznać serwis responsywny?

„Poznam, gdy zobaczę” ?

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

Istota responsywności

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

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

Konsekwencje RWD dla 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

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

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

- Ograniczenia w tworzeniu osobnego przekazu mobileAle…

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

… 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

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

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

… it may not be rolled in our mobile site.

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

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

Uniwersalna treść

Strukturyzacja treści i content strategy

Jak powinna skalować się treść serwisu?

Odpowiedzi należy szukać element po elemencie.

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

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

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.

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

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

COPE – Create Once, Publish Everywhere

+ 80% pageviews

Case study:Credit-agricole.pl

Strategia treści i jej wpływ na projektowanie

Motto marki: „Prosto i z sensem”

Przeprojektowanie serwisu „Klub rabatowy Credit Agricole”

http://klubrabatowy.credit-agricole.pl

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

Badania z użytkownikami pokazały pewne problemy.

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

Credit-agricole.pl

Home page Strona kategorii

Szczegóły produktu

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

Spadek wyszukiwań informacji kontaktowych: -70,05%

Credit-agricole.pl – strona kategorii

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

Credit-agricole.pl – strona produktu

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

fakty• „Przeciętna strona banku”

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.

Etapy prac

Warsztaty strategii treści

Projektowanie User Experience

Nowy serwis

Wymagania i struktura treści

Copywriting Wdrożenie

Project stakeholders

Warsztaty strategii treści

Menedżerowie produktu

Public Relations

MarketingMarketing online

(lider projektu)

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

Efekty warsztatów

Persony (4 grupy docelowe)

Kryteria wyboru produktów i potrzeb informacyjnych

Efekty prac nad treścią

Mapa rodzajów stron

Szablony treści wraz z wymaganiami

WymaganiaPrzykład

zastosowania

Element struktur

Content templates / stylebook

Nominacja

Finalny serwis4 punkty przełamania, dopasowana treść

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

8.04.2023

UX Upgrade - Treść 43

Dodatkowa treść przydatna w kontekście mobilnym

Elastyczne prezentowanie treści

Narzędzia i strategie A.D. 2014

Elastyczne prezentowanie treści

Teksty

Obrazy i ikony

Tabele

Co z video?

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

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/

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

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

Kadrowanie przez wyznaczenie „punktu skupienia

Responsywne obrazy – strategia kadrowania

http://useiconic.com/

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

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

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

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

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

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.

Dziękuję za uwagę

Wojtek ChojnackiStrategy & Development LeaderWojciech.chojnacki@symetria.pl

Ux Upgerde_Symetria_Projektowanie responsywnych treści

Design

Transcript of Ux Upgerde_Symetria_Projektowanie responsywnych treści

Zarządzanie treścią w procesie projektowania UX

Biblioteczka specjalisty UX

UX Poland 2015 - UX Trends

Ux writing, tajniki i techniki

UX w trudnych warunkach

Whiteboard Challenge - Jak rekrutować UX Designera

Teach UX by sharing (Lang: PL)

Ux w pracy marketingowca

Warsztaty UX - Participatory design

Specjaliści UX w Polsce 2013

UX Wrocław 2016

Warsztaty UX - design studio

Digital UX portfolio Anin De

Mobile web & PWA for Tipi UX Poznań

ABC OpenOffice Ux Pl

Narzędzia w warsztacie UX Designera

7 mitów dotyczących UX

Angielsko-polski słownik IA, UX, UI & SEO

Raport : KARIERA W UX

Projektowanie Makiet UX - strata czasu czy konieczność?