馃帹 uxowy.dev #2
8 min czytania

馃帹 uxowy.dev #2

Witaj w drugim wydaniu newslettera uxowy.dev.
Mamy 艣wietne wie艣ci!

馃帀

Projekt uxowy.dev b臋dzie kontynuowany!
Uda艂o si臋 zebra膰 100 os贸b w pierwszym tygodniu dzia艂ania MVP.
A nawet du偶o wi臋cej 馃憖 馃挜 馃嵒

Dostali艣my mas臋 pozytywnego feedbacku i wsparcia od Was w postaci dalszego udost臋pniania uxowy.dev i podsy艂ania miejsc, na kt贸rych mogliby艣my wspomnie膰 o projekcie. Dzi臋kujemy!

To tyle ze wst臋pu, wracajmy do "mi臋ska" 馃敟
Co dzisiaj?

  1. 5 design tip贸w jak robi膰 lepszy UI/UX
  2. Zagadka 馃
  3. Jak sprawdzi膰, czy projekt wypali?
  4. Kogo warto obserwowa膰 馃憖
  5. Zobacz jak to si臋 robi: UX case study Exo fitness app

Startujemy!


5 design tip贸w jak robi膰 lepszy UI/UX

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

Design nie jest prosty. Ci臋偶ko zrobi膰 aplikacj臋 / stron臋 www, kt贸ra robi dobre wra偶enie (UI) i wzbudza w nas mega-pozytywne odczucia (UX).

Poni偶ej 5 design tip贸w, kt贸re pomog膮 Ci robi膰 lepszy UI/UX.

1. Typografia

Zr贸bmy szybki przyk艂ad, otw贸rz Figm臋 i do roboty:

  • ogranicz ilo艣膰 styli i font贸w w projekcie:
    - 1/2 font-family wystarcz膮, np. jeden dla standardowego tekstu, jeden dla nag艂贸wk贸w. Jeden na ca艂膮 aplikacj臋 te偶 jest ok 馃槈
    - b膮d藕 minimalistyczny/a - nie u偶ywaj miks贸w: pogrubienia, kursywy, podkre艣lenia na raz itd.
    - podstawowy font nie mo偶e by膰 zbyt "wymy艣lny", Montserrat jest ok
  • zdefiniuj wielko艣膰 pocz膮tkow膮 standardowego tekstu, np. 15px
  • zdefiniuj kolor tekstu bazowego (pami臋taj o odpowiednim kontra艣cie), np.: #292929
  • zdefiniuj kolor "drugorz臋dny" dla mniej wa偶nych tre艣ci, podpowiedzi itd., np.: #757575
  • zdefiniuj kolor dla nag艂贸wk贸w, np. #000000
  • zdefiniuj wielko艣膰 h1, h2, h3, h4 - mo偶esz pos艂u偶y膰 si臋 tutaj np. zasad膮 z艂otej proporcji. Kalkulator Golden Ratio Typography jest tutaj bardzo pomocny i poka偶e ew. warningi - co poprawi膰
  • zdefiniuj line-height tekst贸w: dla <p> to mo偶e by膰 150%, dla <h1> itd. mo偶e to by膰 130%
  • zdefiniuj odst臋py mi臋dzy nag艂贸wkami, tekstem standardowym, <p>, <ul>, <ol>
  • dostosuj szeroko艣膰 kontenera z tekstem, aby utrzymywa膰 ok. 50-60 znak贸w na lini臋, przewa偶nie to jest jakie艣 500-700px szeroko艣ci
  • sprawd藕 popularne kombinacje, typu: nag艂贸wek + tekst podstawowy + lista <ul> czy wszystko dobrze wygl膮da i "wsp贸艂gra"
  • ew. dostosuj wielko艣ci / kolory, aby wszystko "wsp贸艂gra艂o"
  • na koniec - zapisz te element w Figmie, aby korzysta膰 z nich w designach

Przyk艂ad:

Playground - font Montserrat 15px jako baza.

Gotowe! Teraz mo偶esz u偶ywa膰 zdefiniowanych przez siebie typ贸w tekst贸w na reszcie ekran贸w:

Zapisane Text Styles w Figmie, do u偶ycia na wszystkich ekranach appki.

2. B膮d藕 sp贸jny

Sp贸jny interfejs jest bardziej intuicyjny. Dzi臋ki temu user mo偶e polega膰 na jakich艣 schematach wewn膮trz naszej aplikacji.

Im mniej wysila m贸zgownic臋, tym lepiej.

M贸zg szybciej nauczy si臋, jak porusza膰 si臋 po UI i b臋dzie potrzebowa艂 do tego mniej mocy obliczeniowej 馃槣

Sp贸jno艣膰 przycisk贸w primary i secondary: ten sam font i kolor. Zmiana polega tylko na odwr贸ceniu koloru t艂a i tekstu. 殴r贸d艂o

Pomocne w tym przypadku s膮 m.in. komponenty w Figmie.

Raz utworzone komponenty s膮 potem u偶ywane na wszystkich ekranach designu aplikacji.

Mo偶emy utworzy膰 z grupy element贸w komponent i potem u偶ywa膰 go dowoln膮 ilo艣膰 razy w innych miejscach. Zmieniaj膮c co艣 w komponencie-matce, zmiany zastosuj膮 si臋 we wszystkich dzieciach. Dzi臋ki temu zachowamy sp贸jno艣膰 wygl膮du tego komponentu.

3. Tw贸rz naturalne szaro艣ci

W prawdziwym 艣wiecie "szary" to nigdy nie jest zbiorem RGB (red, green, blue) o r贸wnych warto艣ciach, np. rgb(128,128,128). 艢wiat艂o s艂oneczne, refleksy, cienie - to wszystko sprawia, 偶e "szary" zawsze ma jak膮艣 domieszk臋 innego koloru.

Po lewej proste odcienie szaro艣ci, po prawej dodanie domieszki koloru niebieskiego. 殴r贸d艂o

Zastan贸w si臋, czy w twojej aplikacji "szary" nie b臋dzie lepiej wygl膮da艂 jako "niebiesko-szary" 馃檪

Przyk艂ad - popularny Framework Tailwind CSS domy艣lnie kolor "text-gray" ma zdefiniowany jako "niebiesko-szary":

Text Color - Tailwind CSS

4. Nie polegaj na opacity

Stosuj膮c opacity wkraczamy w "niesp贸jno艣膰" kolorystyczn膮. Element z ustawionym opacity b臋dzie mia艂 ko艅cowo inny kolor w zale偶no艣ci od u偶ytego t艂a pod nim.

To b臋dzie miks dw贸ch lub wi臋cej kolor贸w.
A przecie偶 mia艂o by膰 sp贸jnie 馃槣

Je艣li tekst ten znajduje si臋 na tle w jakim艣 kolorze, wybierzmy dla tekstu odpowiednio jasny / ciemny odcie艅 koloru tego t艂a - to sprawi, 偶e tekst b臋dzie wygl膮da艂 lepiej i b臋dzie sp贸jnie kolorystycznie.

Zamiast korzysta膰 z opacity, wybierzmy odpowiednio ja艣niejszy / ciemniejszy kolor tekstu. 殴r贸d艂o

PS. Pami臋tajmy o odpowiednim kontra艣cie 馃檪

5. Dodaj wi臋cej przestrzeni

Pusta przestrze艅 (ang. white-space), u偶yta w艂a艣ciwie, tworzy powi膮zania mi臋dzy elementami UI.

Pusta przestrze艅 daje uczucie czysto艣ci i porz膮dku.

A偶 czu膰 ten powiew wiatru mi臋dzy boxami 馃槀

Jak jest za ciasno, mamy uczucie ba艂aganu, a nasz m贸zg musi bardziej analizowa膰 content, 偶eby rozpozna膰 elementy, powi膮za膰 je se sob膮 i w ko艅cu znale藕膰 to, czego szukamy.

殴r贸d艂o

Dobr膮 praktyk膮 jest zaczynianie od za du偶ej ilo艣ci przestrzeni i stopniowe jej zmniejszanie (je艣li jest taka potrzeba). W ko艅cu dojdziemy do tej w艂a艣ciwej odleg艂o艣ci.


Chwila na zagadk臋 馃

Co tutaj jest nie tak?

Wiesz ju偶? Odpowied藕 znajdziesz na ko艅cu maila.


Jak sprawdzi膰, czy projekt wypali?

Biznes, UX | 藕r贸d艂o
Najcz臋stsze przyczyny niepowodzenia startup'贸w. 殴r贸d艂o

To proste - trzeba przej艣膰 faz臋 obserwacji, zrozumienia i analizy por贸wnywalnych koncepcji, aby przetestowa膰 i zweryfikowa膰 hipotezy z prawdziwymi u偶ytkownikami i zminimalizowa膰 ryzyko, kt贸re istnieje podczas tworzenia produktu.

Chyba nie takie proste...

Zacznijmy od pytania:

Jaki problem rozwi膮偶esz?

A偶 42% startup贸w ponosi pora偶k臋 przez to, 偶e nie rozwi膮zywa艂a odpowiednio du偶ego problemu rynku. 艁atwo zakocha膰 si臋 w swoim pomy艣le i twierdzi膰, 偶e to w艂a艣nie on zwojuje rynek i zarobisz na nim miliony.

Musisz zrobi膰 krok w ty艂 i to przetestowa膰.

Zdefiniuj grup臋 docelow膮

...oraz idealnego klienta. Opisz go tak dok艂adnie, jak tylko potrafisz.

Czy grupa docelowa ma kas臋, 偶eby kupi膰 tw贸j produkt? 馃挼
Jaka b臋dzie jego cena?

Gdzie s膮 twoi odbiorcy? Czy s膮 obecni w Internecie?
Je艣li tak, w jakich miejscach? W social media - Fb? Insta? Clubhouse?

Po艣wi臋膰 na to du偶o czasu.

Zbuduj prototyp (MVP)

Masz szcz臋艣cie, jeste艣 programist膮. Mo偶esz to zrobi膰 sam 馃帀.

Nie utwierdzaj si臋 jednak w przekonaniu, 偶e musisz wypu艣ci膰 projekt ze wszystkimi modu艂ami i wycyckanym kodem...

Im d艂u偶ej trwa testowanie produktu, tym kosztowniejsze b臋dzie naprawienie jego b艂臋dnych za艂o偶e艅.

MVP wypuszczony we w艂a艣ciwym czasie da Ci wiedz臋 do podejmowania lepszych decyzji w przysz艂o艣ci i nakre艣li roadmap projektu.

Jak zrobi膰 MVP?

Je艣li masz odpowiednie umiej臋tno艣ci i nie zajmie to miesi臋cy, a np. kilka tygodni - do roboty.

Je艣li nie, mo偶esz skorzysta膰 z (co raz bardziej popularnych 馃槈) platform no-code. To spos贸b, aby zbudowa膰 MVP szybciej.

Robisz stron臋 www? Webflow
Budujesz platform臋? 聽Bubble
Budujesz appk臋 mobiln膮? Bravo Studio
Budujesz prosty one-page? Carrd

殴r贸d艂o

Wi臋cej narz臋dzi, kt贸rymi mo偶esz si臋 pos艂u偶y膰 znajdziesz na nocode.tech.

Ustal priorytety

W MVP powinny by膰 tylko najwa偶niejsze funkcjonalno艣ci Twojego docelowego produktu. Zidentyfikuj je i wdr贸偶. Reszt臋 zostaw sobie na potem.

艢wietnie, je艣li najwa偶niejsze funkcjonalno艣ci wybieraj膮 u偶ytkownicy ko艅cowi, a nie Ty sam. Ty mo偶esz si臋 myli膰.

Dokop si臋 do prawdziwych potrzeb

Czasami user m贸wi, 偶e potrzebuje X, a po wprowadzeniu X okazuje si臋, 偶e to nie by艂o jednak to, czego oczekiwa艂. Czasami powie co艣, co przyjdzie mu pierwsze na my艣l. Czasami powie co艣, po prostu, z grzeczno艣ci...

Musisz wg艂臋bi膰 si臋 w temat. Zada膰 sobie pytania: "dlaczego?", "co czuje?", "czego si臋 boi?", "czym to jest spowodowane?", "a co, gdyby?".
Wczuj si臋 w rol臋 usera i wypisz oczekiwania, obawy, mo偶liwe rozwi膮zania.

To te偶 jeden z pierwszych etap贸w Design Thinking.

To pozwoli okre艣li膰 realne potrzeby i znale藕膰 lepsze rozwi膮zania.

Testy na 5 u偶ytkownikach

Jakob Nilsen, ekspert szeroko poj臋tego UXa, twierdzi, 偶e wystarczaj膮ca liczba u偶ytkownik贸w do przeprowadzenia test贸w to 5.

Przy zwi臋kszaniu liczby tester贸w, odpowiedzi zaczynaj膮 si臋 powtarza膰.

殴r贸d艂o

Znajd藕 swoich 5 u偶ytkownik贸w, kt贸rzy dadz膮 Ci feedback.
To na pocz膮tek wystarczy.

Zapisuj wyniki test贸w

Spisuj wszystkie wyniki test贸w. Wszystkie ustalenia + feedback, jaki zbierzesz, pomo偶e Ci w okre艣leniu wszystkich "za i przeciw" w napotkanych mo偶liwo艣ciach.


Kogo warto obserwowa膰?

The Futur
YouTube: The Futur
Twitter:@thefuturishere
Podcast: thefutur.com/podcast

Dzi艣 bardziej biznesowo. The Futur to g艂贸wnie tematy: Mindset, Marketing, Sales & Negotiations, Pricing & Motivation. W momencie wysy艂ki tego newslettera, prawie 1.8 mln subskrypcji na YouTube. Niesamowicie warto艣ciowe materia艂y.

Dla temat贸w "design only" maj膮 oddzielny kana艂: The Futur Academy.


Zobacz jak to si臋 robi: UX case study Exo fitness app

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

Zobacz, jak wygl膮da proces UX Designu aplikacji na przyk艂adzie appki Exo.

Etapy procesu. Wi臋cej info w artykule - 殴r贸d艂o
Exo fitness app | An app UX design Case Study
Project overview

Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

鉂. Z艂y UX
鉁. Dobry UX

Jak na jeden email, to i tak za du偶o... ko艅czymy.
Dobrego weekendu 馃嵒

殴r贸d艂o

Je艣li masz jakiekolwiek pytania - odpisz na tego maila. Odpowiadamy na wszystkie otrzymane od cz艂onk贸w newslettera wiadomo艣ci :)

Pozdrawiam i mi艂ego dnia!

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.