馃帹 uxowy.dev #32
8 min czytania

馃帹 uxowy.dev #32

Jak tam Ci min膮艂 weekend? 馃彇 W tym tygodniu czeka nas ci膮g dalszy upa艂贸w, tak偶e... dawaj w cie艅 pod drzewko, hamak, piwko (czy co tam lubisz 馃槈) i聽startujemy z聽nowym wydaniem uxowy.dev.

A co dzisiaj?

  1. Jak zrobi膰 langing page aplikacji SaaS? - porz膮dne case study
  2. #PrzemoPatterns: Footer
  3. Zwi臋ksz UX input'a na mobile w kilka sekund 馃憖

Startujemy!


Jak zrobi膰 langing page aplikacji SaaS? - porz膮dne case study

UI, UX | 藕r贸d艂o
殴r贸d艂o

Zapewne wielu z Was albo ma jakiego艣 SaaS'a jako side-project, albo po prostu programuje go dla klienta. Zobaczmy jak mo偶na zrobi膰 Landing Page'a dla aplikacji SaaS na przyk艂adzie case study designera z 10kdesigners.

Zacznijmy od tego, jak b臋dzie wygl膮da艂 omawiany tutaj Design Process:

Explore 鈫 Research 鈫 Information Architecture 鈫 Wireframing 鈫 Feedback. 殴r贸d艂o

1. Exploration 馃寧

Na samym starcie musimy bardzo dobrze pozna膰 produkt, kt贸ry chcemy "sprzeda膰" na naszym Landing Page. Zar贸wno model jego funkcjonowania (What is SaaS?) jak i specyficzne dla niego funkcjonalno艣ci, kt贸re rozwi膮zuj膮 jaki艣 konretny problem.

W tym case study zaj臋to si臋 utworzeniem landing page'a do eventu organizowanego przez Framer.

Problem Statement: Designing a landing page for a meetup event organized by Framer.

Musimy umie膰 jasno okre艣li膰 czym jest nasz produkt i jaki jest cel Landing Page'a. Musimy wiedzie膰 te偶 do kogo kierujemy nasz膮 "ofert臋".

2. Research 馃攳

To moment zebrania wszystkich danych, zebrania inspiracji, obczajenia konkurencji itd. Wszystkiego, co mo偶e nam pom贸c okre艣li膰 struktur臋 naszego LP - co warto na nim zamie艣ci膰, a co ola膰.

Dla omawianego case study, zadano sobie pytania:

  1. What is the event? Who is going to organize it? When is the event?
  2. Who are the sponsors of the event?
  3. Who are the speakers invited?
  4. How much do we need to pay in order to get into it?
Inspiration Board omawianego Landing Page. 殴r贸d艂o

3. Information Architecture 馃搹

Po researchu powinni艣my mie膰 cho膰by zarys struktury Landing Page'a typowej dla naszej niszy. Warto to wzi膮膰 pod uwag臋.

Je艣li mamy w g艂owie jaki艣 uk艂ad, spiszmy go sobie. 聽W tym przyk艂adzie wykonano to na diagramie:

Information Architecture dla tego case study. 殴r贸d艂o

4. 聽Wireframing 鉁

Po okre艣leniu pierwszej struktury czas na pierwsze szkice naszego Landing Page - nalepiej na kartce papieru.

Tutaj wykonano takie szkice:

Szkice dla tego case study. 殴r贸d艂o

Podczas robienia szkic贸w, albo przenoszenia ich koncepcji do np. Figmy pojawiaj膮 nam si臋 czasami pytania: "Dlaczego akurat ta sekcja a nie inna?", "A mo偶e dam to ni偶ej?".

To jest dobry moment, 偶eby wspomnie膰 o zasadzie AIDA. Autor, w my艣l zasady AIDA, wypisa艂 sobie na karteczkach og贸lne cele i notatki dotycz膮ce tego konkretnego LP:

Cele sekcji Landing Page'a. 殴r贸d艂o
Notatki maj膮ce pom贸c okre艣li膰 struktur臋 i wygl膮d Landing Page'a. 殴r贸d艂o

Nast臋pnie utworzy艂 makiety low-fidelity z r贸偶nymi wariantami:

Makiety low-fidelity LP. 殴r贸d艂o

Plus szybkie Style Guide:

Bazowano na stylu i wygl膮dzie obecnym na platformie SaaS. 殴r贸d艂o

I mo偶na zabiera膰 si臋 za makiety high-fidelity.

Warto mie膰 ca艂y czas w g艂owie:

  • wiek i inne specyficzne parametry naszej grupy odbiorc贸w
  • Landing Page ma by膰 atrakcyjny i ciekawy dla odbiorcy
  • ma jeden cel - wywo艂anie jednej konkretnej akcji (np. zarejestrowanie si臋, kupienie biletu, wykupienie subskrypcji etc.)

Autor wykona艂 "par臋" makiet...

To swego rodzaju playground - warto troszk臋 si臋 pobawi膰 i popr贸bowa膰 r贸偶nych opcji, zanim nazwiemy dumnie nasz膮 makiet臋 "to ta!". 殴r贸d艂o

Finalnie wybrano:

Finalnie wybrana makieta hi-fidelity - wersja light. 殴r贸d艂o
Finalnie wybrana makieta hi-fidelity - wersja dark. 殴r贸d艂o

Finalna wersja w skr贸cie:

  • hero - umieszczono nazw臋 wydarzenia, kr贸tki i聽chwytliwy opis, czas wydarzenia CTA oraz sponsor贸w. Sponsorzy w tym przypadku byli bardzo znani i聽dodawali rangi temu wydarzeniu. W tej sekcji musi by膰 zawarta skondensowana wiedza, co "sprzedajemy" w taki spos贸b, aby zach臋ci膰 odbiorc臋 do wykonania akcji.
  • about - zawarto tutaj wi臋cej informacji o wydarzeniu. Po tej sekcji powinni艣my by膰 pewni czy to wydarzenie na pewno jest dla nas.
  • speakers' list - zastosowano tutaj podzia艂 na "key-note speakers" i "guest speakers", aby nie zasypa膰 odbiorcy list膮 wielu, wielu prelegent贸w na tym samym poziomie w聽hierarchii wizualnej.
  • event timeline - zaprojektowano prost膮 o艣 czasu pokazuj膮c膮 nast臋puj膮ce po sobie wydarzenia. Zastosowano tutaj tylko tytu艂y. Zrezygonowano z聽opis贸w przez zbyt du偶y cognitive load (wykonano ju偶 pierwsze testy z u偶ytkownikami).
  • pricing - okre艣lono 艂atwe w ogarni臋ciu nazwy i opisy plan贸w, aby wyb贸r by艂 艂atwiejszy. Oczywi艣cie preferowana opcja jest wyr贸偶niona kolorem i najbardziej rzuca si臋 w oczy.
  • Q&A section - dodano odpowiedzi na pytania, kt贸re mog膮 pa艣膰 lub pad艂y. Wszystko po to, aby rozwia膰 wszelkie w膮tpliwo艣ci (info o zli偶kach, zwrotach, p艂atno艣ciach etc.) i zarzuci膰 jeszcze na koniec CTA (call to action).
  • footer - utrzymany w prostej formie, wzorowany na footerze platformy SaaS. Warto ponowi膰 tutaj CTA - je艣li kto艣 dotar艂 do ko艅ca LP i jeszcze nie podj膮艂 偶adnej akcji, to podajemy tu mu j膮 jak na tacy. Nie musi scrollowa膰.

Uff, dotarli艣my do ko艅ca.

Nie zapomnij o etapie testowania i zbierania feedbacku. Ka偶da z tych sekcji po zebraniu feedbacku przesz艂a jakie艣 metafory.

Dostarczamy pierwsz膮 wersj臋 ekranu.
Nast臋pnie zbieramy feedback i ...iterujemy.


Wi臋kszo艣膰 organizacji nie po艣wi臋ca zbyt wiele uwagi stopce (footer) swojej witryny (prawdopodobnie r贸wnie偶 s艂yszeli艣cie podobne komentarze od klient贸w, kt贸re potwierdzaj膮 t臋 tez臋 馃槈).

Prawda jest taka, 偶e stopka serwisu, kt贸ry przyjdzie nam zaprojektowa膰 /聽zakodowa膰 jest bardzo wa偶na. U偶ytkownicy korzystaj膮 z footera przede wszystkim po to, aby szybko uzyska膰 potrzebne im informacje lub trafi膰 w聽odpowiednie miejsce.

Co ciekawe, odpowiedni projekt footera mo偶e zwi臋kszy膰 konwersje w witrynie o ponad 23%, a przychody o ponad 15%. Co zatem oznacza 鈥渙dpowiedni projekt鈥 i聽jakich zasad warto przestrzega膰?

鈩癸笍 Wskaz贸wki:

  • Nie kopiuj nawigacji witryny - to podstawowy b艂膮d. Firmy cz臋sto traktuj膮 swoje strony jak ramki do zdj臋膰: nawigacja na g贸rze i stopka na dole s膮 identyczne. To kusz膮ce, ale staraj si臋 tego nie na艣ladowa膰. Zamiast tego znajd藕 sposoby na wyr贸偶nienie unikalnych tre艣ci w stopce.
  • Unikalne tre艣ci, kt贸re nie pasuj膮 do nawigacji - co zatem mo偶na tu pokaza膰? Do艂膮cz kluczowe, og贸lne informacje o Twojej firmie, kt贸re Twoi odbiorcy musz膮 zna膰, ale nie pasuj膮 do Twojej nawigacji/nag艂贸wka. W聽praktyce mo偶e to dotyczy膰 wielu rzeczy. Najwa偶niejsze z nich to np. adres firmy, NIP czy dane kontaktowe. Podobnie jak linki do twoich stron w聽mediach spo艂eczno艣ciowych. Mo偶esz jednak zej艣膰 troch臋 g艂臋biej. Dos艂ownie. Je艣li masz kluczowe podstrony, kt贸re znajduj膮 si臋 poziom lub dwa w d贸艂 od nawigacji najwy偶szego poziomu, do艂膮cz je tutaj.
  • Zadbaj o SEO - jest to szczeg贸lnie istotne w przypadku podstron znajduj膮cych si臋 g艂臋biej, o kt贸rych wspomnia艂em powy偶ej. Mo偶esz mie膰 zak艂adki, kt贸re nadal zas艂uguj膮 na uwag臋 w zakresie optymalizacji pod k膮tem wyszukiwarek (SEO). Twoja stopka jest okazj膮 do ich podkre艣lenia.
  • Wzmocnij cel strony - zadaj sobie pytanie: jaka jest najwa偶niejsza rzecz, jakiej oczekujesz od odbiorc贸w na swojej stronie g艂贸wnej i w ca艂ej witrynie? Mo偶e to by膰 rozmowa telefoniczna, przekazanie darowizny na rzecz organizacji non-profit lub inne dzia艂anie. To wezwanie do dzia艂ania trafia najcz臋艣ciej do nag艂贸wka Twojej witryny. Ale to nie koniec - nie poddawaj si臋, na pewno zale偶y Ci te偶 na kolejnej akcji. Stopka witryny bowiem, mo偶e zawiera膰 dodatkowe wezwanie do dzia艂ania. Mo偶e to by膰 zapisanie si臋 do newslettera, zam贸wienie darmowej wersji demonstracyjnej lub skorzystanie ze specjalistycznego narz臋dzia. R贸偶nica mi臋dzy nag艂贸wkiem a stopk膮 pod tym wzgl臋dem jest prosta: w momencie przewijania Twoi u偶ytkownicy maj膮 ju偶 pewn膮 wiedz臋 o Tobie. Kolejne wezwanie do dzia艂ania doskonale nadaje si臋 do konwersji, kt贸ra prowadzi u偶ytkownika w g艂膮b 艣cie偶ki.
  • Zbuduj zaufanie - footer strony internetowej to 艣wietna przestrze艅 do rozpocz臋cia budowania tego偶 zaufania. W tym miejscu mo偶esz gustownie podkre艣li膰 swoje certyfikaty us艂ug, nagrody za poprzedni膮 prac臋 lub uwagi dotycz膮ce bezpiecze艅stwa.
殴r贸d艂o: tellerdigital.com

Zwi臋ksz UX input'a na mobile w kilka sekund

UX, Resources | 藕r贸d艂o
Narz臋dzie do wizualizacji i sprawdzania konfiguracji atrybut贸w inputa. 殴r贸d艂o

Chodzi o klawiatur臋 na urz膮dzeniach mobilnych. Mo偶emy dobra膰 t臋 w艂a艣ciw膮 za pomoc膮 atrybutu inputmode, aby przyspieszy膰 wprowadzenie odpowiedniej warto艣ci.

Mo偶emy te偶 zaoszcz臋dzi膰 czas i wysi艂ek u偶ytkownika potrzebny do wpisywania warto艣ci - okreslaj膮c autocomplete. Je艣li na urz膮dzeniu ma zapami臋tan膮 warto艣膰 historyczn膮 tego typu, zostanie mu wy艣wietlona podpowied藕.

Okre艣lenie tych parametr贸w z narz臋dziem podlinkowanym ni偶ej zajmie Ci kilka chwil, a聽UX inputa (jak i聽ca艂ego formularza) na pewno wzro艣nie 馃殌

Narz臋dzie do wizualizacji i聽sprawdzania konfiguracji atrybut贸w inputa:
https://better-mobile-inputs.netlify.app/


To wszystko na dzi艣 鈽锔忦煃

Na zako艅czenie, memik.
Taki w stylu UXowym... 馃槀馃槀馃槀

Zassane z kana艂u #memy-it spo艂eczno艣ci Zaprogramuj 呕ycie 鉂わ笍

Pom贸偶 innym wiedzie膰 wi臋cej

Znasz kogo艣, kto powinien do艂膮czy膰 do naszej spo艂eczno艣ci? Je艣li tak, to聽wy艣lij do tej osoby link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista. I聽niech do艂膮czy do 馃帹聽uxowy.dev!

Pozdrawiam i do nast臋pnego! 馃憢
...w przysz艂y pi膮tek 馃槈

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.