Dzisiaj temat z pogranicza UX writingu i UX designu, czyli ikonki i etykiety.
Jako ikonkę mam tu na myśli piktogram reprezentujący jakąś funkcję lub informację, w interfejsach często będący przyciskiem; za etykietę zaś uznaję towarzyszący ikonce tekst, wyjaśniający działanie danego przycisku.
Kierując się chęcią stworzenia minimalistycznego interfejsu, designerzy czasem decydują się umieścić w nim samą ikonkę bez towarzyszącej jej etykiety.
Jest to zrozumiałe, gdy korzystamy z tych piktogramów, które są przez użytkowników trwale kojarzone z jednym konkretnym działaniem (np. lupa, dyskietka, iks).
Gorzej, gdy ikonka może być interpretowana na wiele sposobów. Wówczas użytkownicy nie wiedzą, czego spodziewać się po akcji, którą wywołuje dany przycisk. Zwiększają się ich poziomy stresu i napięcia i mniej chętnie eksplorują daną stronę lub aplikację.
Dobrą praktyką UX jest upewnienie się, że każdej ikonce towarzyszy etykieta, która krótko wyjaśnia, czego możemy się spodziewać po naciśnięciu przycisku lub do jakiej podstrony zostaniemy przekierowani.
Jeśli piktogram jest oczywisty — jak na przykład wspomniana już lupka — to można pominąć etykietę.
Jeżeli natomiast nie mamy miejsca na etykietę i jesteśmy zmuszeni dać samą ikonkę, zadbajmy o to, by:
• piktogram jak najlepiej obrazował działanie przycisku;
• etykieta pojawiała się w formie tooltipa po najechaniu kursorem na ikonkę;
• działanie przycisku zostało wyjaśnione w trakcie onboardingu.
Nie zapominajmy przy tym o dostępności — elementy strony, w tym każdy znajdującyc się na niej przycisk, powinny mieć Alt Text, dzięki któremu osoby korzystające choćby ze screen readerów mogły zapoznać się z działaniem każdego elementu.
#UX #uxwriting #Dostępność #accessibility #webdesign
@Wrzoo tak tylko zostawię. xd
@Dziwen Za każdym razem xD Kiedyś było łatwiej, wystarczyło irdą komuś coś wysłać i każdy był szczęśliwy, że się telefony stykają
@Wrzoo @Dziwen czyli @hejto uważa że wszyscy jesteśmy idiotami i nam ikonki podpisał xD
Pioruny nie są podpisane więc mało osób naciska xDDD
@entropy_ no i mamy odpowiedź. XD
@Dziwen więc tak:
Eksport, sherowanie ekranu, udostępnij, dodaj noda w drzewku rozgałęzień, nie wiem coś kojarzę ale nie wiem, zrób komuś prezent (może spakuj?), pozwól by inni też mieli do tego dostęp
Bo przecież to nie jest tak że to wszystko to znaczy udostępnij prawda?
@camonday z pewnością tak nie jest. XD
Swoją drogą ten prezent to chyba najbardziej porąbany wybór dla "udostępnij". XD
Komentarz usunięty
@owczareknietrzymryjski xD
@Wrzoo poproszę wpis a potwierdzaniu anulowań, anulowaniu anulowań i anulowaniu potwierdzeń
@Wrzoo To czego ja nienawidzę na stronach internetowych, to wyskakujące okienka z jakże interesującymi mnie informacjami!
@Pan_Buk nie mogłabym się zgodzić bardziej. 🥲
Co do A11Y i alt tekstach przypomniałaś mi jak kiedyś dostałem zlecenie na stronę fundacji, czasy pierwszych jQuery i zachłyśnięcia się web 2.0, może to nie było już tak kolorowe jak czasy stron na tabelach I Geocities ale jeszcze nie czasy bootstrapa i każda strona wygląda identycznie.
No ale do rzeczy miałem pociąć stronę z projektu Photoshopa i przygotować mocno pod SEO, pierdyliard tagów, alt tekstów, bo PageRank czuje dobrze człowiek xD
Wszystko by było dobrze, strona wstępne zaakceptowana przez klienta, zostaje tylko usunąć lorem ipsum i uzupełnić treści i brać się za SEO.
Przychodzi kolejny mail od klienta: niestety nie mogę zaakceptować projektu strony, stronę "widziała" nasza pani dyrektor i powiedziała tylko że ta strona to gówno i jeden wielki bełkot i burdel.
Próbuje wytłumaczyć klientowi że treści uzupełniamy to lirum epsum zniknie i niech zaktualizuje przeglądarkę
To był błąd, po prostu strona miała najrbane tagów, zanim dyrektor na czytniku dotarł do tekstu właściwego to czytal teńme tagi do usranego
@Sosnowiczanin xDDD piękne!
Zaloguj się aby komentować