Ciemne wzory: odkrywanie ciemnej strony sieci

Kochamy sieć. Wszyscy musielibyśmy znaleźć inną karierę, gdyby nie niesamowity wynalazek Sir Tima Bernersa Lee! Jednak mimo naszej pasji, sieć może być nieprzyjemnym miejscem.

Ciemne wzory mogą być niezamierzone. Marketer lub programista mógł pomyśleć, że postępuje właściwie, ale nie docenił problemów i wad wdrożonej funkcji. Najgorsze ciemne wzory są zamierzone. Strona nakłania Cię do zrobienia czegoś, czego nie zamierzałeś, ponieważ interfejs użytkownika lub sformułowania manipulują Twoimi działaniami. Użytkownicy są coraz mądrzejsi w kwestii najbardziej wątpliwych technik, ale ktoś gdzieś nie zauważy, że zostali oszukani, dopóki nie będzie za późno.

Dobrze wykorzystana sieć pozwala oszczędzić czas, podróże i energię. Z drugiej strony ciemne wzory marnują miliony godzin pracy i kilowatów. Nie będziemy zawstydzać żadnych konkretnych witryn (wiedzą, kim są), ale tam, gdzie to możliwe, zilustrujemy ulepszenia i alternatywne opcje.

To są nasze pieszczoty.

Nieintuicyjne interfejsy użytkownika

Są to najczęstsze ciemne wzory, z którymi się spotkasz. Potrzeba czasu i uwagi, aby stworzyć wspaniałe wrażenia użytkownika… i możesz bardzo szybko zepsuć cały ten wysiłek dzięki tym natrętnym ciemnym wzorom.

„Zainstaluj naszą aplikację!”

Niektóre witryny i sieci społecznościowe proszą o zainstalowanie ich aplikacji — zazwyczaj po kliknięciu powiadomienia e-mail o nowej wiadomości lub obserwatorze. Link otwiera się na stronie internetowej z dwoma przyciskami:

1. Ogromny przycisk „Skorzystaj z naszej aplikacji”. Kliknięcie go prowadzi do AppStore, gdzie należy zatwierdzić, pobrać, zainstalować, a następnie uruchomić natywną aplikację witryny (zakładając, że jest obsługiwana w telefonie). Następnie musisz się zalogować, pomylić hasło, poprosić o zresetowanie, otworzyć łącze, utworzyć nowe hasło i uzyskać dostęp do systemu. Prawdopodobnie zapomniałeś, dlaczego tam byłeś, więc wróć do pierwotnego alertu i zacznij od nowa.
2. Mikroskopijny link „kontynuuj w sieci mobilnej” do wykonania akcji.

Być może aplikacja jest wspaniała i wydano na nią miliony, ale rzadko można znaleźć taką, która ma więcej funkcji niż strona internetowa. Oczywiście aplikacja może gromadzić więcej danych osobowych niż system sieciowy, dzięki czemu zyskuje bardziej inwazyjną promocję.

Promuj aplikację wszelkimi sposobami, ale robienie tego na początku każdej interakcji denerwuje użytkowników. Niektórzy zainstalują aplikację, aby powstrzymać dokuczliwość, ale inni odejdą. Czy skuteczniejsze byłoby oferowanie aplikacji, gdy użytkownik korzysta z witryny przez jakiś czas?

„Czy chciałbyś otrzymywać powiadomienia?”

Jednym słowem: Nie.

Subskrypcje biuletynów, internetowe powiadomienia push, widżety „porozmawiajmy” i podpowiedzi do ankiet mogą być przydatne, ale ich implementacje są powszechnie okropne.

Witryny często proszą o subskrypcję w momencie pierwszego dostępu po wyszukiwaniu w sieci. W tym momencie nie masz pojęcia, czy treść jest istotna, czy jest dobra, czy też witryna jest miejscem, które warto często odwiedzać. Nic dziwnego, że większość ludzi klika „Nie”.

Nie ma nic złego w oferowaniu powiadomień lub biuletynów, ale najlepiej jest upewnić się, że użytkownik najpierw zainteresował się witryną. Być może wyświetl monit na końcu artykułu lub po kilku wizytach. Jest mniej inwazyjny, mniej rozpraszający i ma większe szanse powodzenia.

Wreszcie, nie zachęcaj użytkowników do zapisania się na biuletyn, gdy klikną łącze w biuletynie! Odpędzi je szybciej niż wciągnie.

Dziwaczna nawigacja

Paski nagłówka i rozwijane menu mogą być nudne, ale ludzie je rozumieją. Nie chcemy zatrzymać ewolucji interfejsu użytkownika i pomysłowości projektowej, ale niektóre elementy sterujące nawigacji są dziwne i nielogiczne.

Przemyśl ponownie swój projekt, jeśli chcesz zachęcić użytkowników za pomocą podpowiedzi „kliknij tutaj” lub innych metod pomocy. Dobre interfejsy użytkownika nie wymagają wyjaśnień.

Niepotrzebne przesuwanie przewijania

Wyświetlanie animacji lub aktualizowanie aktywnych elementów menu podczas przewijania strony może być ciekawym doświadczeniem. Jest mniej przydatny, gdy:

1. Animacje są nadużywane. Animowanie zbyt wielu elementów rozprasza widza — wyróżnienie każdego elementu oznacza, że ​​nic nie zostanie zwrócone użytkownikowi. Kilka subtelnych efektów, aby skupić się na ważnych wiadomościach, działa lepiej.
2. Przełamuje kontekst. Przewijanie nie powinno prowadzić do nieoczekiwanych działań, takich jak znikanie treści, modalne okna dialogowe, przesyłanie formularzy, przekierowania na inne strony itp.

Animacja może również powodować chorobę lokomocyjną i zawroty głowy, więc rozważ użycie zapytania o media CSS prefers-reduced-motion , aby wyłączyć efekty.

Przestańcie tworzyć strony z nieskończonym przewijaniem! Linki do powiązanych treści są przydatne, ale automatyczne ładowanie losowych treści bez zgody użytkownika marnuje przepustowość. Utrudnia to dodawanie zakładek do którejkolwiek strony, uniemożliwiając dotarcie do danych kontaktowych i innych informacji w stopce strony.

Niepotrzebne artykuły wielostronicowe

Wszyscy widzieliśmy „artykuły”, które zawierają akapit tekstu, po którym następuje łącze do następnej strony. Te strony są zazwyczaj przynętą na linki bez istotnej treści — ale nie odkryjesz tego, dopóki nie przebrniesz przez wiele reklam i wyświetleń stron.

Proszenie marketerów internetowych o zaprzestanie tej praktyki jest daremne, ale być może zastanowią się ponownie, czy programiści edukują ludzi, aby nie ulegali tym nonsensom!

Marketing manipulacyjny

Internet jest największym rynkiem na świecie, na którym można sprzedawać nieskończoną gamę produktów fizycznych i cyfrowych. Użytkownicy będą wracać raz za razem… chyba że zdecydujesz się uciec się do ciemnych wzorców w celu zwiększenia sprzedaży.

Problemy z subskrypcją

Rezygnacja z subskrypcji powiadomień lub biuletynów powinna być tak prosta jak subskrypcja, jeśli nie prostsza. Proszenie użytkowników o pokonanie przeszkód w rezygnacji z subskrypcji prowadzi do frustracji i utraty wiary w witrynę. Nie ma wiarygodnego powodu, aby żądać od użytkowników przefaksowania oryginalnego aktu urodzenia, trzech dokumentów potwierdzających adres oraz najnowszej dokumentacji medycznej.

Ukryte reklamy

Reklamy są nadużywane w wielu witrynach, ale najgorsze przykłady:

1. Wyglądać jak menu lub opcja;
2. Udawać, że są to wiadomości lub artykuły informacyjne ze strony, z której pochodzi; lub
3. Pokaż kontrolki interfejsu użytkownika, takie jak duży przycisk „POBIERZ” na stronie dotyczącej oprogramowania.

Witryny nie zawsze mogą określić, jaki projekt reklamy jest używany, ale kontrolują miejsce docelowe. Umieszczanie reklam w widocznych miejscach w celu zmylenia ludzi może zwiększyć przychody z reklam, ale czy ci użytkownicy wrócą?

Automatyczne dodawanie produktów do koszyków

Przydatna może być lista powiązanych lub polecanych produktów. Inną sprawą jest dodanie ich do koszyka użytkownika bez jego zgody. Ilu ludzi uzna to za pomocne?

• W najlepszym razie niewielka część użytkowników zauważy dodatkowy przedmiot i zdecyduje się go zatrzymać.
• Większa część usunie go.
• Niektórzy nie zauważą do momentu dostawy, potem narzekają i żądają zwrotu pieniędzy.

Działania te zwiększają sprzedaż kosztem obsługi klienta, wartości firmy i bieżących zakupów zwrotnych. Rozpatrywanie reklamacji i zwrotów pieniędzy może zrównoważyć każdy krótkoterminowy wzrost rentowności.

Ukryte koszty zakupów

Nie jest przyjemnie spędzać czasu na wybieraniu produktu, rejestrowaniu się, wprowadzaniu szczegółów dostawy i publikowaniu informacji o płatnościach, aby odkryć, że cena wzrosła powyżej konkurencyjnych witryn. Strona podsumowania pokazuje teraz ukryte koszty, takie jak dostawa, ubezpieczenie, obsługa i mamy nadzieję, że nie zauważysz tych opłat.

Ceny powinny być jasne i uczciwe, w przeciwnym razie klienci stracą wiarę w usługę e-commerce. Jeśli koszty dostawy znacznie się różnią, poproś użytkownika o podanie kraju lub kodu pocztowego przed podjęciem decyzji o zakupie.

Sztuczny czasomierz niedoboru zapasów i dostępności

Warto wiedzieć, kiedy produkt jest w magazynie, ale niektóre witryny e-commerce zwiększają wiarygodność. Im więcej informacji przekazują, tym mniej wiarygodne stają się:

"KUP TERAZ! 2 sztuki w magazynie, 15 kupiono w ciągu ostatnich 3 minut, a 597 osób przegląda tę stronę.”

Te taktyki wysokiego ciśnienia stają się bardziej podejrzane, gdy stosuje się je do przedmiotów cyfrowych lub wartościowych, takich jak samochody i wakacje.

Użytkownicy szybko zdają sobie sprawę, że te wiadomości są bezwartościowe, gdy produkty pozostają w magazynie przez wiele dni. Czy będą kontynuować zakupy, gdy nie można ufać przekazom marketingowym witryny?

Rezygnacja ze wstydu

Nawet niektóre duże firmy e-commerce stosują głupie techniki zawstydzania. Wyświetlą pytanie rejestracyjne, a następnie duży przycisk „Zgadzam się” i mniejszy link do rezygnacji, taki jak:

• „Nie — nie chcę nieograniczonej bezpłatnej dostawy”.
• „Nie, nie obchodzi mnie los zagrożonych puszystych zwierząt”.
• „Nie, chcę zobaczyć płonącą planetę”.

Czy ta praktyka działa? Być może. Ale czy buduje uczciwą relację z klientem i zwiększa zaufanie do serwisu?

Złożone anulowanie plików cookie

Ogólne rozporządzenie o ochronie danych (RODO) UE wymaga, aby witryny wyświetlały informację o rezygnacji z nieistotnych plików cookie i podobnych technologii śledzenia. To wadliwe, ale ustawodawstwo ma dobre intencje i jest wymogiem prawnym w całej Europie. W innych krajach mogą obowiązywać podobne zasady, chociaż zazwyczaj są one mniej rygorystyczne.

Większość użytkowników zgłosi się i przejdzie bez zastanowienia (co częściowo przeczy sednie przepisów). Rezygnacja powinna być równie łatwa, ale niektóre witryny wymagają:

• przedzierać się przez strony/karty żargonu przed znalezieniem opcji;
• klikaj dziesiątki pól wyboru, nawet jeśli narusza to zasady RODO; oraz
• poczekaj nawet minutę, aż „zapisują twoje preferencje” (do czego?).

Może to skłonić niektórych użytkowników do kliknięcia „zgadzam się ze wszystkimi”, chociaż inni porzucą witrynę lub przejdą do trybu czytania, aby ukryć powiadomienie o pliku cookie. W najlepszym przypadku utrudnienie rezygnacji sprawia wrażenie, że witryna ma coś do ukrycia. W najgorszym przypadku ten ciemny wzór jest na granicy legalności i może prowadzić do grzywien lub zwiększonych kosztów prawnika.

Straszna technologia

Technologie takie jak HTML są użyteczne, dostępne i kompatybilne wstecz po wyjęciu z pudełka. Odrzucenie tych korzyści wymaga szczególnego wysiłku.

Łamanie funkcjonalności przeglądarki

Przycisk Wstecz był największym wkładem sieci w interfejsy użytkownika. Jest praktyczny i zrozumiały dla każdego, kto ma minimalne doświadczenie techniczne. Jednak witryny łamią go, otwierając nowe okna/karty, wygasając poprzednią stronę lub mówiąc użytkownikom, aby nie używali elementów sterujących przeglądarki.

Nie ma technicznych powodów, aby zepsuć funkcjonalność przeglądarki. Próba obejścia kontroli jest problemem projektowym, który dezorientuje użytkowników i sprawia, że ​​system sieciowy jest mniej użyteczny.

Inne problemy, których należy unikać:

1. Nie wyłączaj menu prawym przyciskiem myszy ani długiego dotykania.
2. Nie wyłączaj kopiowania ani nie dodawaj dalszego „użytecznego” tekstu.
3. Nie przerywaj dodawania zakładek w aplikacji do obsługi jednej strony, nie aktualizując adresu URL.

Ale najgorszy ze wszystkich tych problemów jest następny na naszej liście.

Wyłączanie wklejania w polach haseł

Wyłączenie wklejania z jakiegokolwiek powodu jest niepotrzebne. Wyłączenie wklejania w polu hasła jest nieprzyjemne, ale napotkasz to ograniczenie na dużych witrynach — powinny wiedzieć lepiej. Widziałem to stosowane przez główne banki międzynarodowe.

Praktyka jest prawdopodobnie wdrażana z wątpliwych względów bezpieczeństwa. Jeśli użytkownik nie może wkleić, ma się rozumieć, że nie może ponownie użyć hasła z innego miejsca. Niestety uniemożliwia to również ludziom korzystanie z aplikacji do zarządzania hasłami. Nie jest już możliwe generowanie bardzo bezpiecznych, długich, losowych ciągów, których wpisywanie jest niepraktyczne.

Poza tym programiści mogą wyłączyć ograniczenia wklejania za pomocą majsterkowania w DevTool. Inni mieliby problemy i częściej używali słabych haseł. Nigdy nie wyłączaj wklejania — to mniej pracy dla Ciebie i poprawia bezpieczeństwo systemu.

Niemądre ograniczenia hasła

„Hasło musi mieć od 8 do 12 znaków i musi zawierać co najmniej jedną wielką literę, cyfrę i symbol — ale nie używaj ` ' ” / \ lub ;”

Nie ma dobrego powodu do wprowadzania ścisłych ograniczeń haseł. Zapytaj siebie:

1. Czy system przechowuje hasło w postaci zwykłego tekstu w bazie danych, a nie haszuje je?
2. Czy ekspert ds. bezpieczeństwa zasugerował powstrzymanie ludzi przed używaniem łatwych haseł, takich jak hasło , qwerty lub 123456 ? To prawda, ale zapobiega również używaniu bardziej złożonych haseł i zapewnia przydatny szablon do łamania metodą brute-force.

Pojedyncza reguła wymusza silne hasła: długa minimalna długość. Każda dodatkowa postać wykładniczo zwiększa złożoność i czas pękania.

Skok do treści mobilnych

Czytanie treści na smartfonie może być frustrującym doświadczeniem. Jesteś pochłonięty artykułem, gdy treść wyskakuje z ekranu i tracisz swoje miejsce. Następnie spędzasz kilka sekund gorączkowo przewijając w górę iw dół. Albo, co gorsza, klikniesz łącze lub przycisk w momencie, gdy się przesunie, i nastąpi nieoczekiwane działanie. Niektórzy czytelnicy stracą impet, zrezygnują i odejdą, zanim zdołasz nawrócić ich na klienta.

Przeskakiwanie treści występuje, gdy obraz lub ramka iframe (zwykle reklama) ładuje się powyżej punktu przewijania widocznego obszaru. Po załadowaniu treści przeglądarka może określić jej wymiary i umieścić ją na stronie. Dlatego obraz o wysokości 500 pikseli (pokazany w pełnym rozmiarze) przesuwa zawartość w dół o tę samą wartość.

Wskaźnik Google Cumulative Layout Shift (CLS) mierzy skoki zawartości i odpowiednio nakłada na witryny kary. Był to złożony problem, ale dostępnych jest teraz kilka rozwiązań technicznych:

• Dodaj atrybuty width i height do elementów HTML img i iframe lub użyj właściwości aspect-ratio CSS, aby zarezerwować miejsce na stronie przed załadowaniem zasobu.
• Ustaw wymiary elementów kontenerów zawierających wolniej ładujące się zasoby, takie jak reklamy, obrazy i widżety mediów społecznościowych.
• Poproś o większe obrazy tak wcześnie, jak to możliwe i rozważ użycie wstępnie załadowanych łączy w head HTML.
• Zoptymalizuj użycie czcionek internetowych i korzystaj z rozwiązań zastępczych o podobnym rozmiarze, aby zminimalizować przesunięcia układu.
• Unikaj wstawiania elementów u góry strony, chyba że jest to aktualizacja DOM wywołana działaniem użytkownika, takim jak kliknięcie.
• Użyj zawierania CSS, aby zoptymalizować renderowanie bloków treści. Możliwe jest zdefiniowanie elementów, które nie będą miały wpływu na rozmiar lub położenie innych.

Kiedy logowanie społecznościowe jest do bani

Technologie takie jak OAuth umożliwiają użytkownikom szybką rejestrację w witrynie przy użyciu innego konta, takiego jak Google, Facebook, Twitter, LinkedIn lub Github. Dobrze zaimplementowana, jest to praktyczna opcja, która zapewnia sprawniejszy proces rejestracji, oszczędza czas i prowadzi do wyższych konwersji.

Jeśli witryna jest źle zaimplementowana, strona będzie następnie wymagać podania adresu e-mail, danych osobowych, a nawet hasła „do ich akt”.

Nie wszyscy dostawcy przekazują informacje o użytkownikach, więc unikaj OAuth, jeśli Twoja witryna wymaga, aby te dane działały. OAuth nigdy nie powinien stać się niepotrzebnym krokiem, który spowalnia proces rejestracji.

Słaba wydajność sieci

Według archiwum HTTP, przeciętna strona internetowa ładuje się na urządzeniu stacjonarnym w ciągu siedmiu sekund, a na urządzeniu mobilnym dwadzieścia sekund. Jedno wyświetlenie strony wysyła 70 żądań HTTP, pobiera ponad 2 MB danych i emituje do atmosfery 1,3 g CO² (patrz Kalkulator emisji dwutlenku węgla na stronie internetowej). To jest średnia — wiele witryn jest gorszych.

Nikt nie planuje powolnej witryny, ale dodanie funkcji często przewyższa poprawę wydajności. Biorąc pod uwagę, że możliwe jest stworzenie grywalnego klonu Quake'a w rozmiarze 13 KB, musisz zadać sobie pytanie, dlaczego dwa akapity marketingowego gofra na stronie „O nas” wymagają pobrania, które jest 154 razy większe!

Zajęcie się wydajnością wymaga kombinacji technik, ale musisz pamiętać tylko o jednym kluczowym punkcie: nie wysyłaj zbyt wielu rzeczy!

Podstępne widżety mediów społecznościowych

Widżety mediów społecznościowych, takie jak przyciski „Lubię to”, wyglądają niewinnie, ale:

1. Każdy dodaje setki kilobajtów kodu JavaScript, co wpływa na wydajność strony.
2. Kod stanowi zagrożenie bezpieczeństwa, ponieważ działa z tymi samymi uprawnieniami, co JavaScript witryny.
3. Widgety wdrażają śledzenie użytkowników, nawet jeśli nie są aktywowane. Może to prowadzić do problemów prawnych na niektórych terytoriach.
4. Prawie nikt ich nie używa: będziesz miał szczęście, gdy zobaczysz 1% zaangażowania użytkowników.

Widgety też są niepotrzebne. Większość serwisów społecznościowych zawiera standardowe linki, które zachowują udostępnianie bez ryzyka dla wydajności, bezpieczeństwa lub prywatności, np.

• E-mail: mailto:?subject=[title]&body=[url]
• Facebook: https://www.facebook.com/sharer.php?u=[url]
• Twitter: https://twitter.com/share?url=[url]&text=[title]
• LinkedIn: https://www.linkedin.com/shareArticle?url=[url]&title=[title]
• Reddit: https://reddit.com/submit?url=[url]&title=[title]

Gdzie [url] to aktualny adres URL strony, a [title] to główny nagłówek. Standardowy link <a> działa dobrze, ale możesz go ulepszyć, aby otwierał stronę w wyskakującym okienku, jeśli chcesz, aby zachowywały się identycznie jak standardowe przyciski.

CAPTCHA

CAPTCHA to skrót od Completely Automated Public Turing test, aby odróżnić Computers and Humans Apart. Pomaga zapobiegać dostępowi botów lub innych komputerów do systemów internetowych. Często pojawia się prośba o wpisanie tekstu widocznego na nieczytelnym obrazie lub kliknięcie w kwadraty zawierające rowery. (Czy rower zamontowany na samochodzie się liczy? A co z tym trójkołowcem? Czy za tą ścianą jest rower!?)

CAPTCHA mają trzy podstawowe problemy:

1. Są celowo trudne dla zdrowych ludzi z doskonałym wzrokiem. Jak mają sobie radzić osoby z wadami wzroku lub innymi zaburzeniami wzroku?
2. Muszą stać się bardziej złożone w miarę ulepszania botów i technik sztucznej inteligencji.
3. Nakładają ciężar bezpieczeństwa dostępu na użytkowników — a nie na właścicieli witryn czy deweloperów, głównych beneficjentów.

CAPTCHA to przesada na większości stron internetowych. Możesz rozważyć alternatywne opcje do CAPTCHA, które powodują mniejszy wysiłek ludzki:

• Ukryte pola honeypot blokują przesyłanie formularzy, gdy boty dodają dane.
• Sprawdź, czy zdarzenia klawiatury, takie jak input lub keydown klawisza, są odpowiednio wyzwalane.
• Sprawdź, ile czasu zajmuje wypełnienie i przesłanie formularza — aktywność botów jest często natychmiastowa.
• Utwórz dwuetapowy proces przesyłania, w którym przed przesłaniem użytkownika zostaniesz poproszony o potwierdzenie swoich danych lub dodatkowe pytanie.

Zatrzymają one większość botów. Możliwe jest ominięcie dowolnej z technik, ale wymaga to dodatkowego wysiłku programistycznego specyficznego dla Twojej witryny. Niewielu twórców botów będzie się martwić, gdy istnieją tysiące innych witryn ze znanymi lukami w zabezpieczeniach.

Streszczenie

Sieć to świetne miejsce, ale kilka wątpliwych praktyk może zrujnować tę percepcję. Oczywiście możesz zostać oszukany w dowolnym miejscu, ale sieć pozwala sprawcom dotrzeć do tysięcy osób niewielkim kosztem lub wysiłkiem. A kiedy wielkie, wielomiliardowe firmy lekkomyślnie używają ciemnych wzorców, jest to wręcz haniebne!

Witryny używają ciemnych wzorów, ponieważ działają. Ale to myślenie krótkoterminowe. Odwiedzający zawsze stają się mądrzy w nikczemnych technikach i mogą nigdy nie wrócić.

Postępuj właściwie, buduj zaufanie do swojej marki, a zatrzymasz klientów bez uciekania się do ciemnych wzorców.

Masz inne przemyślenia na temat ciemnych wzorców, które napotkałeś? Podziel się nimi w sekcji komentarzy poniżej!