馃帹 uxowy.dev #18
4 min czytania

馃帹 uxowy.dev #18

Witaj w 18-tym, pe艂noletnim, wydaniu newslettera uxowy.dev.
Zamiast kawusi 鈽曪笍 , 艣mia艂o mo偶na otworzy膰 piwo 馃嵒.

Dzi艣, opr贸cz mi臋ska o UI/UX, zwracamy si臋 do Ciebie z pewn膮 pro艣b膮...
Zobacz:

  1. Pro艣ba 馃檹
  2. #PrzemoPatterns: Wykresy
  3. Kogo warto obserwowa膰 馃憖
  4. Framer Sites - kolejny krok w stron臋 no-code
  5. Web Usability Checklist - wy艂ap najcz臋stsze b艂臋dy usability dzi臋ki tej li艣cie

Start!


Pro艣ba 馃檹

Przyznasz, 偶e po 17. wydaniach newslettera uxowy.dev jeste艣my ju偶 w聽tematyce UX troch臋 obeznani 馃槢

Dlatego, zamiast sami wyznacza膰 kierunek dalszego rozwoju, zapytamy聽o聽zdanie Ciebie! 馃 馃

Przygotowali艣my mega prost膮 ankiet臋, kt贸ra sklada si臋 z ...uwaga... 3聽pyta艅. Szanujemy Tw贸j czas, a odpowiedzi na te pytania pozwol膮 nam na obranie w艂a艣ciwego kierunku.

Link do ankiety:
https://www.survio.com/survey/d/B8X2Q8X3B8K8V3E1U

To tylko 3 pytania, wype艂nij ankiet臋 pls 馃憜

Ok, odpowiedzi klikni臋te?
Dzi臋kujemy!

Mo偶emy lecie膰 dalej z materia艂ami.


#PrzemoPatterns: Wykresy

Zwizualizowanie nudnych danych to co艣, za co u偶ytkownicy mog膮 pokocha膰 Tw贸j projekt. Z drugiej strony, nieczytelne wykresy to przyczyna sporej irytacji, co聽cz臋sto prowadzi do wyboru konkurencji. Jak聽widzisz, stawka jest wysoka.

Zatem, jak poprawnie przedstawia膰 dane?

艁ap 5 szybkich porad:

1. Wybierz prawid艂owy typ wykresu

Wyb贸r niew艂a艣ciwego typu wykresu mo偶e zdezorientowa膰 u偶ytkownik贸w i聽prowadzi膰 do b艂臋dnej interpretacji informacji.

Przyk艂ad: kiedy masz du偶膮 ilo艣膰 danych z podobnymi warto艣ciami, zrezygnuj z聽wykresu ko艂owego - u偶ytkownikowi trudno b臋dzie zauwa偶y膰 r贸偶nic臋 mi臋dzy poszczeg贸lnymi kategoriami. Zadbaj o jak najlepsz膮 czytelno艣膰 danych.

Wi臋cej o zasadach dot. wyboru typu wykresu tutaj:
https://uxplanet.org/10-rules-for-better-dashboard-design-ef68189d734c

2. Nie u偶ywaj zaokr膮glonych wykres贸w liniowych

Zaokr膮glone wykresy liniowe mog膮 by膰 przyjemne wizualnie, ale mog膮 b艂臋dnie przedstawia膰 rzeczywiste dane. Dodatkowo, zbyt grube linie zas艂aniaj膮 rzeczywiste pozycje 鈥瀖arker贸w鈥.

uxdesign.cc

3. Wstaw labelki prowadz膮ce bezpo艣rednio do wykresu

Bez odpowiedniego etykietowania, abstrahuj膮c od tego jak pi臋kny jest Tw贸j wykres, dla u偶ytkownik贸w nie b臋dzie mia艂 on sensu.

uxdesign.cc

Przy okazji, nie umieszczaj etykiet wewn膮trz wykresu ko艂owego, mo偶e okaza膰 si臋 to nieczytelne.

4. Sortuj wyniki

Nie ustawiaj domy艣lnie sortowania alfabetycznego. Umie艣膰 najwi臋ksze warto艣ci na g贸rze (w przypadku poziomych wykres贸w s艂upkowych) lub po lewej (w przypadku pionowych wykres贸w s艂upkowych), aby mie膰 pewno艣膰, 偶e najwa偶niejsze warto艣ci zajmuj膮 najbardziej widoczne miejsce.

Redukujesz dzi臋ki temu ruch oczu i czas potrzebny na odczytanie wykresu.

uxdesign.cc

5. Zadbaj o dost臋pno艣膰

Wed艂ug National Eye Institute oko艂o 1 na 12 os贸b ma problemy z聽odr贸偶nieniem kolor贸w. Twoje wykresy odnios膮 sukces tylko wtedy, gdy b臋d膮 dost臋pne dla szerokiego grona odbiorc贸w.

U偶yj r贸偶nych nasyce艅, sprawd藕 kontrast i czytelno艣膰. Dla testu mo偶esz wydrukowa膰 wykresy w czerni i bieli.

uxdesign.cc

Kogo warto obserwowa膰?

Marc Andrewf

Do艣wiadczony designer, autor Cabana Design System. Dzieli si臋 wiedz膮 o聽UI/UX m.in. w聽postaci mikro-tip贸w, kt贸re na pewno Ci si臋 spodobaj膮.

Twitter: @mrcndrw
Web: marcandrew.me

Baaardzo polecamy:


Framer Sites - kolejny krok w stron臋 no-code

Resources | 藕r贸d艂o
Framer Sites - klikamy "Publish" i boom 馃挜

Framer to znane narz臋dzie do tworzenia prototyp贸w, w kt贸rym mo偶emy odwzorowa膰 bardziej skomplikowane animacje, interakcje itd.

No w艂a艣nie... teraz mo偶na zrobi膰 w nim nie tylko prototypy, ale i聽pe艂noprawne strony www - uruchomiona zosta艂a beta Framer Sites.

Zobacz pr贸bk臋 mo偶liwo艣ci: demo-projekty, kt贸re zosta艂y utworzone w聽Framer Sites (kliknij, aby przej艣膰 na te strony i聽zobaczy膰 wszystkie interakcje i聽animacje):

Demo: https://app-landing-page.framer.website/
Demo: https://portfolio.framer.website/

Zobacz film pokazuj膮cy jak zacz膮膰 w Framer Sites:


Web Usability Checklist - wy艂ap najcz臋stsze b艂臋dy usability dzi臋ki tej li艣cie

UX, Resources | 藕r贸d艂o
teamsuccess.io/UX

Zapisz sobie t臋 list臋 i sprawd藕 wszystkie punkty za ka偶dym razem, przed wypuszczeniem aplikacji. Dzi臋ki temu wy艂apiesz najcz臋艣ciej pope艂niane b艂臋dy UX, jeszcze zanim ktokolwiek zobaczy Twoj膮 aplikacj臋 馃檪

Link: teamsuccess.io/UX


Dzi臋kujemy Ci za wype艂nienie ankiety i...
dobrego pi膮teczka! 馃檪

PS: Prze艣lij znajomym link do skr贸tu z ostatnich wysy艂ek: uxowy.dev/lista - niech maj膮, a co! 馃敟 I niech do艂膮czaj膮 do uxowy.dev, aby niczego nie przegapi膰!

PS2: Memik na dobre wej艣cie w weekend 馃槀 :

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

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.