馃帹 uxowy.dev #17
5 min czytania

馃帹 uxowy.dev #17

dzi艣 zaczniemy troszk臋 powa偶niej - o architekturze informacji. Niech Ci臋 jednak ten temat nie przerazi - napisali艣my fajny skr贸t z pigu艂k膮 wiedzy "na start". A聽zako艅czymy lu藕no i聽z聽humorem! 馃憤

Oblukaj:

  1. Architektura Informacji - co to jest i jak si臋 za to zabra膰?
  2. #PrzemoPatterns: Toggle
  3. Kogo warto obserwowa膰 馃憖
  4. Tw贸rz pi臋kne gradienty - u偶yj tego narz臋dzia

Architektura Informacji - co to jest i jak si臋 za to zabra膰?

殴r贸d艂o

Natalia Bienias, kt贸ra by艂a ju偶 wspominana w sekcji "Kogo warto obserowa膰" wypu艣ci艂a ostatnio 艣wietny tekst o wej艣ciu w Architektur臋 Informacji: czym jest, czym nie jest, kto zajmuje si臋 jej tworzeniem, 藕r贸d艂a wiedzy i narz臋dzia.

Oto skr贸t "dla developera" z tego wpisu (na ko艅cu wpisu znajdziesz link do pe艂nej tre艣ci newslettera):

  • Warto pami臋ta膰, 偶e architektura informacji 鈮 nawigacja
  • Nawigacja to cz臋艣膰聽AI i nie powinna by膰 tworzona w oderwaniu od pozosta艂ych tre艣ci
  • Nawigacja mo偶e przyj膮膰 r贸偶ne formy, niekt贸re z nich:
    - klasyczny pasek z linkami
    - lokalna nawigacja na podstronie
    - filtry w sklepie internetowym
    - rozbudowana stopka z linkami
    - breadcrumbs
  • AI jest struktur膮 tre艣ci w ca艂ym produkcie
  • AI tworzymy najcz臋艣ciej na diagramach
  • Zrobiony model AI jest podstaw膮 do zrobienia makiet i UI w聽projekcie
  • AI robi g艂贸wnie UX Designer / Product Designer (czasami... developer, kt贸ry nie ma designer贸w w zespole i chce zrobi膰 to sam - to ju偶 nasz przypis, Natalia oczywi艣cie o tym nie pisze 馃槢)

Jak zabra膰 si臋 za projekt AI?

  1. Zacznij od zgrupowania funkcjonalno艣ci, okre艣lenia modu艂贸w lub obszar贸w, z聽kt贸rych sk艂ada si臋 Twoje rozwi膮zanie.
  2. Zastan贸w si臋, jakie funkcjonalno艣ci pe艂ni ka偶dy z聽modu艂贸w lub na jakie podgrupy mniejszych zasob贸w si臋 dzieli.
  3. Maj膮c tak przygotowane listy, poszukaj po艂膮cze艅 mi臋dzy tymi modu艂ami, co pozwoli Ci lepiej zrozumie膰 w jaki spos贸b u偶ytkownik b臋dzie m贸g艂 przemieszcza膰 si臋 po produkcie, czy stronie www, tak aby odnale藕膰 odpowiedni, interesuj膮cy go zas贸b.

Tipy od Natalii:
- zastan贸w si臋, co chcesz zrobi膰? Ca艂kowicie przebudowa膰 serwis / poprawi膰 nawigacj臋 / poprawi膰 nazwy kategorii?
- poznaj swoich odbiorc贸w - dowiedz si臋, czego i jak szukaj膮; pogadaj z聽nimi
- poznaj troch臋 teorii, dobre 藕r贸d艂a wiedzy znajdziesz ni偶ej
- zrozum tre艣ci i obecn膮 struktur臋 w projekcie, spr贸buj znale藕膰 niesp贸jno艣ci i聽sprawd藕, czy czego艣 nie brakuje
- zaprojektuj pierwsz膮 wersj臋
- zwaliduj - przetestuj rozwi膮zanie, np. za pomoc膮 tree testing, test贸w u偶yteczno艣ci; 艣led藕 analityk臋 w gotowym produkcie (np. za pomoc膮 HotJar, SmartLook, Google Analytics itd.)

Warto pozna膰

Por贸wnanie Card sorting i Tree testing. 殴r贸d艂o

Sortowanie kart (card sorting)

Metoda badawcza polegaj膮ca na uk艂adaniu (sortowaniu) kartek z聽nazwami (np. kategoriami w sklepie, zak艂adek na stronie, dowolnych poj臋膰) w tematyczne grupy.

Dzi臋ki temu, sprawdzimy, czy odbiorcy rozumiej膮 zdefiniowane przez nas grupy tak samo jak my.

Mo偶emy do tego u偶y膰 narz臋dzia Optimal Workshop, albo innego pozwalaj膮cego "uk艂ada膰 karteczki". Przyk艂ad sortowania kart, w聽wykonaniu Natalii: https://1kh11zba.optimalworkshop.com/optimalsort/elp024bn.

Plan:

  1. Prosimy o pogrupowanie kart u偶ytkownik贸w
  2. Na podstawie wniosk贸w z bada艅 tworzymy tematyczne grupy

Tree testing

Test, w kt贸rym oceniamy struktur臋 kategorii, prosz膮c u偶ytkownik贸w o聽znalezienie odpowiedniego miejsca w tej strukturze.

Do przeprowadzenia tych test贸w mo偶emy u偶y膰 np. narz臋dzia Maze lub innego pozwalaj膮cego odpowiada膰 na pytania. Przyk艂ad tree testing, w wykonaniu Natalii: https://t.maze.co/69171386.

Plan:

  1. Tworzymy jak膮艣 struktur臋 kategorii, nasze drzewo
  2. Sprawdzamy za pomoc膮 pyta艅 do u偶ytkownik贸w, czy zrobili艣my to prawid艂owo

Sk膮d czerpa膰 wiedz臋 o Architekturze Informacji?

Ksi膮偶ka "Architektura informacji w serwisach internetowych i nie tylko". Zobacz wpis Natalii na Insta
Ksi膮偶ka "A Practical Guide to Information Architecture". Zobacz wpis Natalii na Insta

Link do pe艂nej tre艣ci wpisu Natalii:
https://preview.mailerlite.com/v5n8t8h8x4/1860771715081049000/c7z5/


#PrzemoPatterns: Toggle

Dzi艣 we藕miemy pod lup臋 Toggle - element z pozoru prosty i zrozumia艂y, rzeczywisto艣膰 pokazuje jednak, 偶e tw贸rcy aplikacji nie zawsze wiedz膮, jak dobrze go u偶ywa膰. O czym zatem nale偶y pami臋ta膰?

馃 Co to jest?

Z definicji, Toggle to po polsku prze艂膮cznik.

鉁 Kiedy stosowa膰?

  • Powinien on zawsze w艂膮cza膰 lub wy艂膮cza膰 dan膮 funkcj臋.
  • Powinien zastosowa膰 akcj臋 "instant" - u偶ytkownik powinien natychmiast zauwa偶y膰 efekt, tak jak w聽rzeczywistym 艣wiecie dzia艂a prze艂膮cznik 艣wiat艂a

鉂 Kiedy unika膰?

  • Nie stosuj go do prze艂膮czania dw贸ch przeciwstawnych znacze艅, np. ciep艂y/zimny, PLN/USD itp.
    Dla do艣wiadcze艅 u偶ytkownika dobrze zachowa膰 zgodno艣膰 mi臋dzy wirtualnym systemem a rzeczywisto艣ci膮 (jedna z Heurystyk Nielsena). Zatem, w tym przypadku, dok艂adnie odzwierciedli膰 do czego s艂u偶y prze艂膮cznik: funkcja ON/OFF.

鈩癸笍 Wskaz贸wki

  • Dodaj subteln膮 animacj臋, gdy zmienia si臋 jego stan.
  • Pami臋taj o聽odpowiednim kontra艣cie kolor贸w, gdy toggle jest w艂膮czony/wy艂膮czony lub nieaktywny.

Oto przyk艂ad toggle z dobrze dobranym kontrastem:

殴r贸d艂o

A tutaj zarzucamy 艣wietne 藕r贸d艂o, kt贸re omawia szerzej toggle i pozosta艂e kontrolki typu "selection controls": https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546

Polecamy 馃憜


Kogo warto obserwowa膰?

YouTube KarolStefa艅ski

Karol Stefa艅ski

Interesuj膮ce filmy o UI/UX z du偶膮 doz膮 humoru to chyba to, co najbardziej wyr贸偶nia Karola sposr贸d innych tw贸rc贸w. Zobacz te dwa 艣wietne filmy:

"Co to jest DOST臉PNO艢膯 w UX! Kilka s艂贸w o accessibility".
"OKRUTNE b艂臋dy w projektowaniu stron" na podstawie Top 10 Web-Design Mistakes of 2021.

YouTube: KarolStefa艅ski
LinkedIn: karolstefanski
Instagram: karol.ux


Tw贸rz pi臋kne gradienty - u偶yj tego narz臋dzia

UI, Resources | 藕r贸d艂o
Screen z narz臋dzia Gradient Generator - Josh Comeau

Josh W Comeau doda艂 艣wie偶ynk臋 wpis dot. gradient贸w. Mamy te偶 do dyspozycji wygodne narz臋dzie do tworzenia pi臋knych gradient贸w.

Zach臋cam Ci臋 do oblukania ca艂ego wpisu z wieloma interaktywnymi elementami na jego blogu.

W skr贸cie:
zobacz, tak wygl膮da klasyczny linear-gradient od koloru 偶贸艂tego do niebieskiego:

Fuj 馃憥

Na 艣rodku widzimy tzw. "gray dead zone", kt贸ry widoczny jest przez tworzenie 艣redniej z warto艣ci RGB (Red, Green, Blue) kolor贸w:

Przyznasz, 偶e nie wygl膮da to najlepiej.

Co zrobi膰?

Na szybko: korzysta膰 z trybu HSL (Hue, Saturation, Lightness) lub HCL (Hue, Chroma, Luminance).

Albo - pro艣ciej - skorzysta膰 z narz臋dzia, kt贸re Josh dla nas przygotowa艂:
Gradient Generator 鈫


To wszystko na dzi艣 馃檪
Dobrego weekendu!!!

PS. Te偶 tak macie? 馃憞

殴r贸d艂o

PS2: Prze艣lij znajomym link do skr贸tu z ostatnich wysy艂ek newslettera: uxowy.dev/lista - niech maj膮, a co! 馃敟

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.