Witryny sieci Web są budowane w celu wykonywania funkcji i komunikowania się z ich użytkownikami. Ale poza tym strony internetowe mogą być także wciągające, ekscytujące, a nawet przyjemne w użyciu.

Dodanie wizualnego zainteresowania do strony pomaga utrzymać nasze zaangażowanie w nią, niezależnie od tego, czy jest to typografia, grafika czy fotografia. Uważam jednak, że istnieje również potencjał elementów interakcji, które zapewniają wizualną stymulację i sprzężenie zwrotne, a nawet zachwycają użytkownika. W tym artykule będę twierdził, że dodanie niektórych efektów, aby zabawić, zaskoczyć i podniecać użytkowników, może sprawić, że twoje strony internetowe i aplikacje będą lepsze, a użytkownicy wrócą.

Rozkosz

Projektowanie stron internetowych jest często tematem suchym, obciążonym żargonem UX i podróżami użytkowników architektury informacji. Ale dlaczego po drodze nie powinno być zabawy? Dodanie rozkoszy do witryny to świetny sposób, aby uczynić witrynę nie tylko bardziej ludzką, ale także uczynić witrynę wyjątkową.

Zamierzam zawęzić moją definicję rozkoszy tutaj, mówiąc, że jest to dodanie niezbyt pożądanej funkcjonalności.

Rozumiem przez to, że nie jest to istotna część funkcji witryny. Może jednak mieć ogromny wpływ na sposób postrzegania i doświadczania witryny. W rzeczywistości posunąłbym się do stwierdzenia, że ​​sposób obsługi ściśle zbędnych elementów interfejsu użytkownika jest równie ważny, jak typografia i inne elementy wizualne, w ustawianiu tonu strony internetowej.

Jedna darmowa interakcja

W an artykuł dla Cooper Journal, Chris Noessel nazywa "jedną swobodną interakcję" wzorcem projektowym, "który nadaje programowi bardziej ludzki charakter".

Częścią tego jest uznanie, że ludzie są niespokojnymi stworzeniami, często podatnymi na powtarzanie drobnych czynów. Tradycyjnie za pomocą pióra i papieru doodle lub ciągłe wciąganie pisaków. Jestem na przykład niepoprawnym pisarzem.

Ludzie często przenoszą tę uciążliwość w przeglądanie stron internetowych, często przewijając w górę iw dół, wybierając fragmenty tekstu lub powtarzając czynności.

Wzorzec Jednej Wolnej Interakcji obejmuje tę wrodzoną ludzką potrzebę gry na skrzypcach, tworząc interaktywne elementy, które dają nieoczekiwane lub przyjemne rezultaty. Potrzebujesz przykładu? Umieść wskaźnik myszy nad logo "W" w witrynie Web Designer Depot u góry tej strony.

Jak mówi Noessel, wolne interakcje nie mieszczą się w zadaniach, a zamiast tego siedzą w przestrzeniach między nimi. Ale są potężni w kształtowaniu naszej reakcji emocjonalnej na witryny, których używamy.

Efekty przewijania

Jak już wspomniano, jednym z najbardziej popularnych "wierceń" jest przewijanie w górę iw dół, więc strony, które dodają wzrok podczas przewijania, są często zachwycające.

Jednokartkowa strona dla Nizo Aplikacja Photo Mechanics z Image Mechanics posiada "Knolled" elementy kamery, które poruszają się podczas przewijania w dół i w dół podczas przewijania w dół. Jeśli jesteś podobny do mnie, spędzisz sporo czasu, przewijając w górę iw dół, bawiąc się wspaniałym interfejsem. (Nie wstrzymuj oddechu, czekając na zwolnienie aplikacji.)

nizo_01

Używanie efektu paralaksy podczas przewijania również dodaje rozkoszy, tworząc iluzję głębi. kocham chłopcze strona internetowa, w której efekty przewijania idealnie pasują do tonu i stylu wizualnego witryny.

boycoy_01

Jestem zaskoczony, że nie ma więcej stron internetowych z efektami przewijania w poziomie, zważywszy, że przewijanie strony jest tak częstym tematem w projektowaniu gier. Ale dobrym przykładem jest Nintendo Mario Kart strona, która przegląda historię gry przez 20 lat konsol Nintendo.

mariokart_01

Polska strona Mashup dodaje warstwy elementów graficznych, które zmieniają się w miarę przewijania, co jest high-techowym sposobem na uzyskanie wrażenia szkicownika z low-fi.

mashup_01

Prawdopodobnie królem stron efektów przewijania Acko . Tutaj elementem nagłówka strony jest animowany obiekt 3D graffiti. Jest to animowane logo przeniesione na wyższy poziom - wciągające, interaktywne, zabawne. Są nawet osiągnięcia, które "odblokowują" w interfejsie użytkownika - choć grywalizacja to zupełnie inny przedmiot.

acko_01

Zaprojektuj dla emocji

Dodanie radości do twojej witryny pomaga stworzyć emocjonalne połączenie z użytkownikiem. Siła emocji w projektowaniu jest czymś, co dopiero zaczynamy rozumieć, ale pomaga wyjaśnić, dlaczego lubimy używać pewnych obiektów i mamy z nimi tak silne połączenie. Dotyczy to zarówno projektowania produktu fizycznego, jak i projektowania interaktywnego.

Myślę, że silnym powodem, dla którego produkty Apple są tak wysoko cenione, jest to, że użytkownicy są emocjonalnie przywiązani do nich i istnieje wiele przykładów radości zarówno ze sprzętu Apple, jak i oprogramowania. Wiem, że wielu ludzi uwielbia przewijanie "gumowego paska" na Safari Safari na iOS tak, że nie będzie ich świadomie przeglądać w górę iw dół.

OK przez "wielu ludzi" mam na myśli mnie, ale Steve Jobs uwielbiał to na tyle, by go opatentować, i stanowi część sporów Apple przeciwko Samsungowi.

Aaron Walter w swojej książce Projektowanie dla emocji, analizuje, w jaki sposób udane strony internetowe angażują emocje użytkowników, dodając im osobowości. Dodawanie elementów, które zachwycają użytkownika, to bardzo skuteczny sposób na zrobienie tego. Mówiąc najprościej, wolimy narzędzia, które nas zachwycają, więc jest to dobre również dla biznesu.

Rozkosz nie jest chwytem

Dodanie rozkoszy nie oznacza dodania wymyślnych efektów jako chwytów. Efekty mają pomóc w ukształtowaniu osobowości witryny. Nie muszą być zabawne ani dziwaczne (choć mogą być, jeśli to jest osobowość, którą chcesz przekazać), mogą być subtelne i powściągliwe, jeśli lepiej pasują do postaci. Spojrzeć na pictet.com. Uwielbiam sposób, w jaki pasek wyszukiwania znika po kliknięciu linku wyszukiwania - powoduje, że pole tekstowe wyszukiwania jest elementem dominującym, dopóki go o to nie poprosisz. Jest subtelny i elegancki, idealnie pasuje do charakteru witryny - szwajcarskiej firmy świadczącej usługi finansowe.

pictet_01

Czasami efekty są tak subtelne, że możesz nawet ich nie zauważyć. Czy wiesz na przykład, że kontrola głośności na BBC iPlayer idzie do 11? To miłe ukłon w stronę Spinal Tap.

Nie przesadzaj

Dodanie zbyt wielu nieoczekiwanych interakcji może przynieść efekt przeciwny do zamierzonego, powodując przesadę wizualną. O ile nie próbujesz stworzyć hiperkinetycznego środowiska gry, zbyt wiele efektów wizualnych, z przewróceniem, pop-upami, whizzbangami i dziwacznymi bombami w całym miejscu poważnie zniekształci wszelkie znaczące zaangażowanie w treść. Spójrz na LEDbow strona na przykład. Technicznie jest genialny, ale nie sądzę, że komunikuje się skutecznie. Po prostu zbyt wiele się dzieje.

ledbow_01

Wybierz się na rozkosz

Uwielbiam witryny traktujące ekran jako wizjer lub powierzchnię, a nie przeglądarkę stron. Warstwy poruszające się z różną prędkością tworzą głębię i zainteresowanie. Elementy poruszające się na miejscu zwracają na nie uwagę.

Ruch sprawia, że ​​doświadczenie jest bardziej wciągające, ale należy pamiętać, że ten rodzaj interaktywności dla samego dobra nie jest równoznaczny z większym zaangażowaniem.

Dodanie rozkoszy sprawia, że ​​strony są bardziej ludzkie, a także bardziej dotykowe, angażując naszą małpiochłonną potrzebę bałagania i zabawy, gdy myślimy i uczymy się. Następnym razem, gdy utworzysz witrynę, zastanów się, w jaki sposób możesz stworzyć coś wyjątkowego, by zachwycić użytkowników.

Czy projektujesz emocje? Jak dodać radość do strony? Daj nam znać w komentarzach.