Szkalujo!

https://www.hejto.pl/wpis/animowane-silniki?commentId=1ddf6583-69a0-48fa-960f-40073d09cd02

#programowanie #okboomer #internet #webdesign #webdev

31 maja:

• Dzień Bociana Białego
  

• Światowy Dzień bez Tytoniu
  

• Światowy Dzień Papugi
  

• Dzień Rodzeństwa
  

• Międzynarodowy Dzień Cytrynówki
  

• Dzień Projektanta Stron Internetowych
  

• Światowy Dzień Bez Majtek
  

• Dzień Pracownika Przemysłu Spożywczego
  

#nietypoweswieta #kalendarz #ciekawostki #papugi #papierosy #bielizna #webdesign #rodzenstwo #bociany

#uxplakaljakuzywal

"Jaki jest mój ulubiony kolor? No Chopin, oczywiście, choć lubię też Daikokaten."

Kiedy szukałam w necie informacji, ile kolorów rozróżnia ludzkie oko, liczby wahały się od 160 do aż 10 milionów.

I choć nasze mózgi lubią grupować podobne kolory tak, by łatwiej je przetworzyć (np. brązy, czerwienie, żółcie), to z jakiejś przyczyny sklepy internetowe chcą umożliwić nam filtrowanie przy pomocy pełnego spektrum barw — na przykład 330. W końcu 330 znajduje się bliżej tej dolnej granicy rozróżnianych kolorów, co nie?

Żarty żartami, ale niedziałające i nieprzemyślane filtry to zmora mniejszych ecommerce'owych graczy.

Klient nie ma czasu na przeglądanie całej gamy produktów — jeśli nie udostępnimy mu dobrego filtrowania, nie tylko nie znajdzie tego fajnego produktu, który chcemy mu sprzedać, ale też odbije się i zacznie szukać towaru gdzieś indziej.

I choć niezadbanie o odpowiednie opisy oraz parametry do filtrowania przyniesie chwilową korzyść w postaci zaoszczędzonego czasu przy wprowadzaniu produktu, to odbije się to na wyższym bounce rate i porzuconych koszykach.

A gorsze chyba jest tylko to, że wraz z rozwojem sklepu, naprawienie tego błędu zajmie o wiele więcej czasu — bo najprawdopodobniej będziemy mieć więcej produktów do aktualizacji.

Co robić?

1. Zadbać o dobrą architekturę informacji już na początku istnienia sklepu.

2. Jeśli nie udało się tego zrobić na początku jego istnienia, to naprawić ten błąd jak najszybciej.

3. Używać filtrów zrozumiałych dla klienta. W opcji na bogato świetnym rozwiązaniem jest stworzenie ich na podstawie testów z klientami, np. w postaci sortowania karteczek. W opcji budżetowej — zobaczyć, jak robi to konkurencja i wyciągnąć wnioski.

4. WAŻNE: poinformować wszystkie osoby wprowadzające produkty do sklepu o konieczności odpowiedniego tagowania produktów (unikając przy tym tworzenia niepotrzebnych nowych filtrów).

5. Nie używać nazw kompozytorów jako nazw kolorów.

#ux #webdesign #ecommerce #IA #architekturainformacji

Kur#$ jakim gównem jest "portal" t-mobile, za każdym je@%&^# razem.

Wchodzę na t-mobile.pl

Loguję się na konto podając nr. tel. Przychodzi kod. Ok, wejszłem. Czy mogę wejść w rachunki? Nieee, taki c⁎⁎j polska świnio, żeby wejść w rachunki, musisz wejść w "Mój Adolf Hitler T-Mobile". No to klikam i co? Ano to co zawsze, czyli germańskie gówno!

O co chodzi? A no o to, że kliknięcie wielkiej k⁎⁎wy LOGOWANIE na stronie głównej nie przekierowuje cię do twojego "konta", tylko na stronę "przedłóż abonament polaku robaku", bo tak sobie jakiś skończony kretyn wymyślił.

Tak samo jest po kliknięciu ikonki "ludzika" i wybraniu opcji "chcę się zalogować".

Żeby wejść na swoje konto, musisz kliknąć na małą ikonkę ludzika, i wybrać "Zaloguj się do T-mobile", tylko że... to działa jak chce.

Żeby było śmieszniej, logując się pierwszym, złym, a narzucanym przez firmę sposobem, musisz wpisać 48 przed nr. telefonu. W drugiej opcji nie musisz. W dodatku kody mają różną długość.

Pewnie jakaś pozostałość starszej wersji wdrożenia.

I po co komu kawa rano...

Za karę rachunki zapłacę w poniedziałek.

#ux #uxdesign #webdesign #ui #tmobile #bekazpodludzi #usability #uxplakaljakuzywal

#uxplakaljakuzywal

Onboarding na komputerze o onboardingu na telefonie mówiący o onboardingu na komputerze? A jakże.

Jakiś czas temu LUX MED (czy tylko ja byłam przekonana, że ich oficjalna nazwa to "LUXMED", a nie "LUX MED"?) odświeżył interfejs portalu pacjenta. W związku z tym pojawił się też onboarding. I to o nim będzie dziś mowa.

Gwoli wyjaśnienia, onboarding to proces, w którym prezentujemy użytkownikowi podstawy poruszania się po interfejsie naszego produktu tak, by szybko załapał i wdrożył się w jego korzystanie. Zazwyczaj pokazujemy w nim główne elementy strony/aplikacji i zachęcamy do ich wypróbowania.

Formy onboardingu bywają przeróżne — opisy tekstowe, dymki, karuzele, czeklisty, gamifikacyjne wyzwania. Możemy od razu przedstawić wszystkie kroki, albo wyświetlać je progresywnie w miarę odkrywania interfejsu przez użytkownika.

Dobry onboarding zachęca użytkownika do skorzystania z niego (no chyba, że mamy do czynienia z przeciwnikiem instrukcji wszelkich, bo instrukcje są dla słabych). Instrukcje w nim powinny być krótkie, jasne i klarowne, dopasowane do faktycznego interfejsu produktu.

Onboarding LUX MEDu przyuważony przez mojego męża jest zaś przykładem nieco konfundującego wprowadzenia. Wyświetla się on w wersji na komputer, a przedstawia... ekran komórki.

Copy również mogłoby być usprawnione. W mojej ocenie na etapie onboardingu nie musimy mówić o tym, gdzie znaleźć opcję oceny pracy specjalisty. Co więcej, w opisie znajdujemy słowo "klikając", kojarzone wyłącznie z myszką. Nie muszę mówić, że to samo słowo użyte jest w onboardingu na telefonie, do którego zwyczajowo myszki nie używamy.

Brak iksa do zamknięcia popovera również nie cieszy — użytkownik chcący pominąć naukę szuka go intuicyjnie w prawym górnym rogu. Zauważenie i odczytanie "Pomiń" w lewym dolnym rogu zajmuje więcej czasu, co na przykład w sytuacji stresowej (potrzeba pilnego umówienia wizyty) może zwiększać stres użytkownika.

Stworzenie dobrego onboardingu wymaga iteracji i testów zwłaszcza w przypadku aplikacji z branży medycznej — a więc takiej, z której korzysta szerokie spektrum użytkowników, w tym osoby mniej biegłe w obsłudze produktów cyfrowych i potrzebujące dostosowania aplikacji do swoich ograniczeń. Należy podejść do tego tematu z empatią, wyrozumiałością i skupić się na tym, kto i w jakich sytuacjach będzie z niego korzystał.

#ux #uxdesign #onboarding #webdesign

#uxplakaljakuzywal

Czasem, gdy zapomnę kupić dzień wcześniej kawę i potrzebuję podnieść sobie ciśnienie, wchodzę na stronę Poczty Polskiej.

10 minut na niej wystarczyło, by:

• przenieść się w czasie do początku lat zerowych i zobaczyła Internet takim, jakim powinien być — nieostylowanym,

• zawiesić się na siedmiu opisach i instrukcjach,

• zagrać w memory z instrukcją, jak korzystać z usługi (zapis streamu z rozgrywki poniżej),

• znaleźć hiperłącze, które linkuje do zupełnie innej strony, niż bym się spodziewała,

• stwierdzić, że jednak nie będę próbowała korzystać z e-doręczeń, bo to zbyt skomplikowane.

Doszłam też do wniosku, że spójność stylistyczna PP polega na tym, że korzystają na swoich podstronach ze wszystkich stylów stosowanych w historii działalności ich strony internetowej.

I z jakiejś niezrozumiałej dla mnie przyczyny wydaje mi się to piękne.

#ux #webdesign #uxdesign #pocztapolska

Najgorsze możliwe projekty suwaków od głośności.

#webdesign #heheszki #humorobrazkowy #gif

Coś do poczytania po angielsku, jeśli ktoś lubi

Akurat nie mój obszar zainteresowań, ale może komuś się przyda

Resilient Web Design

Jeremy Keith

ocena na goodreads

#ksiazki #ebook #zadarmo #czytajzhejto #webdesign

Ej mordy postanowiłem spróbować swoich sił w #webdesign , dogadałem się z jedną ze stołecznych przetwórni owocowo warzywnych i oto efekt. Co myślicie?

http://www.laskol.pl/oferta.htm

Nowy design Peppera jest słaby, ale wersja mobilna jest wręcz tragiczna.

Oczywiście musi być pasek na dole, który zajmuje ekran, a z którego przez 90% czasu nikt nie będzie korzystal.

I, którego nie da się wyłączyć.

I, który nie przylega ściśle do dołu.

Poza tym układ tych elementów w okazji jest dziwny.

Czemu na tych wszystkich portalach muszą koniecznie wprowadzać nowy wygląd...

#pepper #gownowpis #design #webdesign

#uxplakaljakuzywal

Bankomat + bluescreen = PANIKA , czyli o przewidywaniu błędów w UXie

Okres okołoświąteczny jest u mnie czasem wzmożonego wyciągania gotówki z bankomatu (pan sprzedający choinki wciąż jeszcze nie przyjmuje BLIKa na telefon). A że pod domem mam bankomat ING, to chciałam z jego pomocą wypłacić pieniądze.

Zbliżam kartę, wpisuję PIN, wybieram z ekranu żądaną kwotę...

...i powiem Wam, że solidnie mnie wystraszył bluescreenem!

Kasy nie ma. System wrócił po paru sekundach do ekranu startowego.

Co się dzieje? Czy pobrało mi pieniądze? Czemu się nie udało? Co zrobiłam źle?

W UXie, poza happy paths, czyli najbardziej oczywistymi, podstawowymi ścieżkami służącymi osiągnięciu celu przez użytkownika, projektujemy jeszcze unhappy paths. Są to takie ścieżki i rozwiązania, które mają poprowadzić użytkownika między innymi wtedy, gdy występuje błąd.

Staramy się przy tym, by proces ten minimalizował stres związany z błędem poprzez wyjaśnienie jego przyczyny i wskazanie możliwości rozwiązania problemu.

I oczywiście testujemy, testujemy, testujemy. Nie tylko przy projektowaniu ścieżek, ale i od czasu do czasu sprawdzamy, czy istniejące rozwiązania dalej działają i są aktualne.

Bankomat ING chyba nie był należycie przygotowany na tę sytuację ( ͡° ͜ʖ ͡°)

Co więc się stało?

Najprawdopodobniej w bankomacie skończyły się pieniądze. Gdy już tętno się obniżyło i upewniłam się, że pieniądze nie zniknęły, potestowałam jeszcze flow wypłaty środków.

Jeśli nie skorzystamy z predefiniowanych kwot, tylko zdecydujemy się wpisać żądaną kwotę ręcznie, to u dołu ekranu zobaczymy informację o maksymalnej ilości pieniędzy do wypłaty. Ekran w tym miejscu wskazywał "0".

Z bluescreena wynika, że bankomat powinien wyświetlić jakiegoś JPGa. Ale coś poszło nie tak. Na szczęście to drobiazg, i domyślam się, że wkrótce zostanie załatany.

#ux #webdesign #bankomaty #ing

#uxplakaljakuzywal

Dzisiejszy temat: straszna choroba, czyli baneroza.

Na banerozę w okresie zimowym/przedświątecznym choruje wiele sklepów. Te z obniżoną UX-odpornością są szczególnie narażone.

Jej etiologia jest bliżej nieznana. Przymuje się, że najważniejszymi czynnikami zapadalności na tę chorobę są:

brak regularnych testów użyteczności,

deficyt odporności zespołu odpowiedzialnego za rozwój strony na pomysły marketingu,

silna reakcja alergiczna na wdrażanie przyjaznych użytkownikowi rozwiązań UX.

Nieleczona może objąć kolejne obszary, spowodować znaczne szkody w postaci wysokiego wskaźnika bounce rate, obniżonej liczbie ciałek zakupowych i tzw. syndromu porzuconego koszyka.

Leczenie obejmuje:

konsultację ze specjalistą UX,

wycięcie zbędnych wyskakujących okienek,

dietę antybanerową.

PS. Na stronę weszłam i gdy tylko zobaczyłam tę piękną kaskadę, natychmiast ją opuściłam.

#UX #uxdesign #webdesign #banery

Jaki to jest idiotyzm.

Pierwszy komentarz OPa nie wyświetla się, tylko jest ukryty, a otwierający go guzik jest na samym dole, mimo że komentarzy wcale nie ma tak dużo.

To jest pochodna rozwiązań "żeby zaoszczędzić miejsca", ale na Hejto jest zaimplementowane idiotycznie.

Chowane pod-wątki jeszcze można zrozumieć, ale też, gdy jest ich więcej, a nie gdy jest ich raptem 4.

https://www.hejto.pl/wpis/po-co-wewnatrz-budynku-taipei-101-umieszczono-wielka-stalowa-kule-o-wadze-660-to

@festiwal_otwartego_parasola

#ui #ui #webdesign

Mnie śmieszy xD

#webdesign #heheszki

#uxplakaljakuzywal

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